一旦Bootstrap模式选项已存在,请更改该选项

imzjd6km  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(9)|浏览(169)

我使用Bootstrap模式。我宣布它,我叫它,我展示它......一切似乎都很好。
但是,如果我有一个已经存在的模态,之前显示的“keyboard”属性为false,我想在旅途中更改它,该怎么办?我的意思是:
首先,我创建了一个Modal(正如你所看到的,我将modal的putting keyboard属性声明为false):

$('#myModal').modal({
    show: false,
    backdrop: true,
    keyboard: false
});

但随后我声明了这个事件处理程序,这意味着如果发生了“某些事情”,我希望键盘属性设置为true。

$('#myModal').on('shown', function(e) {
    if (something){
        $('#myModal').modal({keyboard: true});
    }
 }

所以,当我去

$("#myModal").show();

事件处理程序没有做它应该做的事情,因为一旦按下Escape键,我就无法关闭模态。但我完全确定“某事”是真的,我已经检查并重新检查$('#myModal').modal({keyboard: true})被执行。
有什么线索可以解释为什么这不是更新配置选项的值吗?

yuvru6vn

yuvru6vn1#

要更改已启动的Bootstrap插件(如Modal)的配置设置,您需要访问附加到元素的插件对象(如$('#pluginElement').data['somePlugin']),然后在其中设置options
对于Modal,您需要:

$('#myModal').data('modal').options.keyboard = true;

JSFiddle Demo (old)

对于Bootstrap 3(如@Gerald的评论中所述),您需要bs.modal

$('#myModal').data('bs.modal').options.keyboard = true;

Waiting Modal Example

2q5ifsrm

2q5ifsrm2#

有点超出了OP的范围,但这是我现在两次寻找相同的解决方案(我的记忆是垃圾),两次我遇到这个问题,导致我最终的答案。我的问题是如何使一个已经初始艾德和显示的模态,这是“可关闭”,成为一个“不可关闭”的模型。在罕见的情况下,即使另一个用户需要这个答案,以下是我根据接受的答案所做的:

  • bootstrap3 used**
$('#modal').off('keyup.dismiss.bs.modal'); // disable escape key
$('#modal').data('bs.modal').options.backdrop = 'static';
$('#modal button.close').hide();

请注意,我没有像上面建议的那样将options.keyboard属性更改为false(然后调用escape())。我不能让它工作,所以在查看Bootstrap源代码后,我看到它所做的只是简单地删除'keyup.dismiss.bs.modal'的事件侦听器。
要重新启用事物(在我的场景中,当模型隐藏时):

$('#modal').on('hidden.bs.modal', function (e) {
    $(this).data('bs.modal').escape(); // reset keyboard
    $(this).data('bs.modal').options.backdrop = true;
    $('button.close', $(this)).show();
});

这似乎完全笨拙,肯定会打破未来版本的Bootstrap,但工程现在...
Cheers:)

ygya80vv

ygya80vv3#

对于bootstrap4

要禁用退出按钮上的关闭模式,请执行以下操作:

$('#myModal').off('keydown.dismiss.bs.modal');

要在单击背景时禁用关闭模式,请执行以下操作:

$('#myModal').data('bs.modal')._config.keyboard = false;

正如Nightmare所警告的那样,这可能会在未来版本的bootstrap中被打破。

axr492tv

axr492tv4#

对于Bootstrap 4.1

options属性应替换为_config

例如

const modal = $('#modal');

/*
 |------------------------------------------------------------------------------
 | Now, let us assume you already opened the modal (via js or data attribute).
 | If you want to access the options and modify.
 |------------------------------------------------------------------------------
 */

// [Not Required] Let us see what the object is like.
console.log( modal.data('bs.modal')._config );

// Override the options to lock modal.
modal.data('bs.modal')._config.backdrop = 'static';
modal.data('bs.modal')._config.keyboard = false;

// [optional] You can also hide all data-dismiss buttons too.
modal.find("[data-dismiss='modal']").hide();

// Revert all actions above.
modal.data('bs.modal')._config.backdrop = true;
modal.data('bs.modal')._config.keyboard = true;
modal.find("[data-dismiss='modal']").show();
jhiyze9q

jhiyze9q5#

设置background和esckey,使其在模态已打开时不关闭模态

$('div[name="modal"]').data('bs.modal').options.backdrop = 'static';
$('div[name="modal"]').off('keydown.dismiss.bs.modal');

取消设置背景和键esc目的不关闭模态

$('div[name="user_profile_modal"]').data('bs.modal').options.backdrop = true;
$('div[name="user_profile_modal"]').data('bs.modal').escape();
zujrkrfu

zujrkrfu6#

您也可以在HTML标签中添加属性:data-keyboard=“false”
<div id="myModal" class="modal hide fade" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
对我很有效!

xggvc2p6

xggvc2p67#

另一个选项,如果你不知道模态是否已经打开或尚未打开,你需要配置模态选项(Bootstrap 3):

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

谢谢@nokturnal

zlwx9yxi

zlwx9yxi8#

对于Bootstrap 5
您可以通过调用bootstrap.Modal.getInstance(domEl)来获取一个已经存在的模态的示例

let domEl = $('#myModal')[0];
let bootstrapInstance = bootstrap.Modal.getInstance(domEl);
bootstrapInstance._config.show = false;
bootstrapInstance._config.backdrop = true;
bootstrapInstance._config.keyboard = false;
zi8p0yeb

zi8p0yeb9#

对我来说这个方法效果最好

$('#modal').on('hide.bs.modal', function () {
    return false;
});

它可以防止modal在任何可能的情况下关闭:

  • 按退出键
  • 在模式外单击
  • 单击关闭按钮
  • 甚至使用$('#modal').modal('hide')

相关问题