我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。
有人可以分享jQuery代码来做到这一点吗?
当前回答
有点像@AymKdn的答案,但这将允许您在不重新初始化模态的情况下更改选项。
$('#myModal').data('modal').options.keyboard = false;
或者如果你需要做多个选项,JavaScript的with在这里派上用场!
with ($('#myModal').data("modal").options) {
backdrop = 'static';
keyboard = false;
}
如果模式已经打开,这些选项将只在模式下次打开时生效。
其他回答
只需将背景属性设置为“static”。
$('#myModal').modal({
backdrop: 'static',
keyboard: true
})
你可能还想将键盘属性设置为false,因为这样可以防止按下键盘上的Esc键关闭模式。
$('#myModal').modal({
backdrop: 'static',
keyboard: false
})
myModal是包含您的模式内容的div的ID。
有点像@AymKdn的答案,但这将允许您在不重新初始化模态的情况下更改选项。
$('#myModal').data('modal').options.keyboard = false;
或者如果你需要做多个选项,JavaScript的with在这里派上用场!
with ($('#myModal').data("modal").options) {
backdrop = 'static';
keyboard = false;
}
如果模式已经打开,这些选项将只在模式下次打开时生效。
覆盖Dialog的Bootstrap ' hide '事件并停止其默认行为(以释放对话框)。
请参阅下面的代码片段:
$('#yourDialogID').on('hide.bs.modal', function(e) {
e.preventDefault();
});
它在我们的例子中工作得很好。
bs 5
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
...
</div>
</div>
b 4.4
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
Launch static backdrop modal
</button>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
...
</div>
</div>
为了在模式显示后更新Bootstrap 4.1.3中的背景状态,我们使用了Bootstrap- modal - wrapper插件中的下面一行。插件存储库代码引用。
$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");