我正在使用Bootstrap Modal。我声明它,我调用它,我展示它......一切似乎都很好。
但是,如果我有一个已经存在的模式,之前显示的“键盘”属性为 false,并且我想随时更改它,该怎么办?我的意思是:
首先,我创建一个模态来执行此操作(如您所见,我声明模态将键盘属性设置为 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})
是否已执行。
有什么线索可以解释为什么这没有更新配置选项的值吗?
要更改已启动的 Bootstrap 插件(例如 Modal)上的配置设置,您需要访问附加到元素的插件对象,例如
$('#pluginElement').data['somePlugin']
,然后在其中设置 options
。
对于模态框,您需要:
$('#myModal').data('modal').options.keyboard = true;
对于 Bootstrap 3(如 @Gerald 的评论中所述),您需要
:bs.modal
$('#myModal').data('bs.modal').options.keyboard = true;
有点超出了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 版本中出现问题,但目前可以使用......
干杯:)
对于 bootstrap4
要禁用退出按钮上的关闭模式:
$('#myModal').off('keydown.dismiss.bs.modal');
要禁用单击背景时的关闭模式:
$('#myModal').data('bs.modal')._config.keyboard = false;
正如 nocturnal 警告的那样,这可能会在 Bootstrap 的未来版本中出现问题。
适用于 Bootstrap 4.1
options
属性应替换为_config
。
EG
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();
设置背景和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();
您还可以在 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>
它对我有用!
如果您不知道模态是否已打开并且需要配置模态选项(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
对于 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;
对我来说这个方法效果最好
$('#modal').on('hide.bs.modal', function () {
return false;
});
它可以防止模态在任何可能的情况下关闭:
$('#modal').modal('hide')