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

Question

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

但是,如果我之前已经将"键盘"属性显示为已经存在的模态为假,我想在移动中更改它？我的意思是:

首先,我创建一个模态执行此操作(如您所见,我将模态put键盘属性声明为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演示(旧)

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

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

等待模态示例

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;

正如夜间活动所警告的那样，这可能会在以后的引导版本中中断。

Answer 4

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