Javascript 一旦 Bootstrap 模式选项已经存在就更改它

Change Bootstrap modal option once it already exists

提问by ElPiter

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:

但是，如果我有一个先前显示的“键盘”属性为 false 的现有模式，并且我想随时随地更改它怎么办？我的意思是这样的：

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.

但是然后我声明了这个事件处理程序，这意味着如果“某事”发生，我希望将键盘属性设置为 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').modal({keyboard: true})它的执行情况。

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

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

回答by merv

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 optionsin it.

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

For the Modal, you need:

对于模态，您需要：

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

JSFiddle Demo (old)

JSFiddle 演示（旧）

---

---

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

等待模态示例

回答by nokturnal

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 :)

干杯:)

回答by user3563059

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.

正如 nocturnal 所警告的那样，这可能会在引导程序的未来版本中中断。

回答by Zeng Xin Reiner Cheung

Setting backdrop and esckey not to close the modal when the modal is already open

当模态已经打开时，设置背景和 esckey 不关闭模态

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

Unset the backdrop and key esc purpose to not close the modal

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

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

回答by user2199629

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>

<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!

这个对我有用！

回答by Cava

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