我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。

有人可以分享jQuery代码来做到这一点吗?


当前回答

如果你想有条件地禁用背景单击关闭功能。您可以使用下面的行在运行时将背景选项设置为静态。

引导v3.xx

jQuery('#MyModal').data('bs.modal').options.backdrop = 'static';

引导v2.xx

jQuery('#MyModal').data('modal').options.backdrop = 'static';

这将防止已经实例化的模型将背景选项设置为false(默认行为)关闭。

其他回答

我相信您想要将背景值设置为静态。如果您想避免在使用Esc键时关闭窗口,则必须设置另一个值。

例子:

<a data-controls-modal="your_div_id"
   data-backdrop="static"
   data-keyboard="false"
   href="#">

如果你使用JavaScript:

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

只需将背景属性设置为“static”。

$('#myModal').modal({
  backdrop: 'static',
  keyboard: true
})

你可能还想将键盘属性设置为false,因为这样可以防止按下键盘上的Esc键关闭模式。

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
})

myModal是包含您的模式内容的div的ID。

如果有人从谷歌来到这里,试图找出如何阻止某人关闭一个模式,不要忘记,在模式的右上方还有一个关闭按钮,需要删除。

我用一些CSS来隐藏它:

#Modal .modal-header button.close {
    visibility: hidden;
}

注意,使用"display: none;"会在创建模态时被覆盖,所以不要使用它。

根据bootstrap 5更新的语法如下。 参考链接

<div class="modal fade" data-bs-backdrop="static" data-bs-keyboard="false" >

如果你已经初始化了模态窗口,那么你可能想用$('#myModal'). removedata ("modal")重置选项。Modal ({background: 'static', keyboard: false})以确保它将应用新选项。