一旦它存在，就更改Bootstrap模态选项

I'm using Bootstrap Modal. I declare it, I call it, I show it...everything seems to be ok.

我正在使用Bootstrap Modal。我宣布它，我称之为，我展示它......一切似乎都没问题。

But what if I have an already existing modal previously shown with "keyboard" property to false and I want to change it on the go? I mean something like:

但是，如果我之前已经将“键盘”属性显示为已存在的模式为假，我想在移动中更改它？我的意思是：

First, I create a Modal doing this (as you can see, I declare the modal putting keyboard property to false):

首先，我创建一个Modal这样做（你可以看到，我声明模态把键盘属性设置为false）：

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

But then I declare this event handler, that means that if "something" happens, I want the keyboard property to be set to true.

但后来我声明了这个事件处理程序，这意味着如果发生“某事”，我希望将keyboard属性设置为true。

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

So, when I go

所以，当我走的时候

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

The event handler is not doing what it is supposed to, as I am not getting to close the modal once Escape key is pressed. But I am completely sure that "something" is true and I have checked and re-checked that $('#myModal').modal({keyboard: true}) is executed.

事件处理程序没有按预期执行，因为一旦按下Escape键，我就无法关闭模式。但我完全确定“某事”是真的，我已经检查并重新检查了$（'＃myModal'）。模态（{keyboard：true}）被执行。

Any clue as to why this isn't updating the value of configuration option?

任何线索，为什么这不更新配置选项的值？

5 个解决方案

#1

To change configuration settings on already initiated Bootstrap plugin, such as the Modal, you need to access the plugin object attached to the element, like $('#pluginElement').data['somePlugin'] and then set the options in it.

要更改已启动的Bootstrap插件（例如Modal）上的配置设置，您需要访问附加到元素的插件对象，如$（'＃pluginElement'）。data ['somePlugin']，然后在其中设置选项。

For the Modal, you need:

对于Modal，您需要：

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

JSFiddle Demo (old)

---

For Bootstrap 3 (as mentioned in comments by @Gerald ), you need bs.modal:

对于Bootstrap 3（如@Gerald的评论中所述），您需要bs.modal：

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

Waiting Modal Example

#2

A bit beyond the scope of the OP, but this is now twice I have searched for the same solution (my memory is crap) and twice that I came across this question which led me to my eventual answer. My issue was how to make an already init'ed and displayed modal, which was "closeable", into an "uncloseable" model. In the rare even that another user needs this answer, here is what I did based on the accepted answer:

有点超出了OP的范围，但这是现在两次我搜索相同的解决方案（我的记忆是垃圾）和两次我遇到这个问题导致我最终的答案。我的问题是如何将已经初始化和显示的模式（“可关闭”）变成“不可关闭的”模型。即使另一个用户需要这个答案，很少见，这是我根据接受的答案做的：

*bootstrap3 used

*使用了bootstrap3

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

Notice that I didn't change the options.keyboard property to false (followed by calling escape()) as suggested above. I could not get that to work, so after looking the Bootstrap source, I saw that all it was doing was simply removing an event listener for 'keyup.dismiss.bs.modal'.

请注意，我没有将options.keyboard属性更改为false（后跟上面的建议调用escape（））。我无法实现这一点，所以在查看Bootstrap源代码之后，我发现它所做的只是删除'keyup.dismiss.bs.modal'的事件监听器。

To re-enabled things (in my scenario, when the model is hidden):

要重新启用（在我的方案中，隐藏模型时）：

$('#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();
});

This seems COMPLETELY clumsy and will for sure break in coming versions of Bootstrap, but works for now...

这似乎完全笨拙，并且肯定会在即将推出的Bootstrap版本中破解，但现在可以使用......

Cheers :)

干杯:)

#3

You can also add an attribute in your HTML tag: data-keyboard="false"

您还可以在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>

It works for me!

这个对我有用！

#4

Another option if you do not know if the modal has already been opened or not yet and you need to configure the modal options (Bootstrap 3):

另一种选择，如果您不知道模态是否已经打开，并且您需要配置模态选项（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
    }
}

Thanks @nokturnal

谢谢@nokturnal

#5

For bootstrap4

对于bootstrap4

To disable closing modal on escape button:

要在转义按钮上禁用关闭模式：

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

To disable closing modal on clicking on backdrop:

要在单击背景时禁用关闭模式：

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

As warned by nocturnal, this may break in the future versions of bootstrap.

正如夜间警告的那样，这可能会在未来的bootstrap版本中出现问题。