Question

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

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

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

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

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

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

所以，当我去

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

事件处理程序没有按预期执行，因为一旦按下Escape键，我就无法关闭模式。但我完全确定“某事”是真的，我已检查并重新检查$('#myModal').modal({keyboard: true})是否已执行。

有关为何没有更新配置选项值的任何线索？

Answer 1

要更改已启动的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

Answer 2

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

* 使用bootstrap3

$('#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版本中破解，但现在可以使用......

干杯：）

Answer 3

适用于bootstrap4

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

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

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

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

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

Answer 4

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

对我有用！

Answer 5

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

Answer 6

设置模态和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();

Answer 7

对于Bootstrap 4.1

options属性应替换为_config。

E.G。

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();

Answer 8

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

at Microsoft.AspNetCore.Mvc.Infrastructure.ResourceInvoker.<InvokeNextResourceFilter>g__Awaited|24_0(ResourceInvoker invoker, Task lastTask, State next, Scope scope, Object state, Boolean isCompleted)

它可以防止模态在任何可能的情况下关闭：

按退出键
在模态外点击
点击关闭按钮
甚至使用 $('#modal').on('hide.bs.modal', function () { return false; });

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

8 个答案:

JSFiddle Demo (old)

Waiting Modal Example