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

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


当前回答

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

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

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

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

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

其他回答

我发现最好的是把这个代码添加到链接中

<!-- Link -->
<a href="#mdl" role="button"  data-backdrop="static" data-keyboard="false" data-toggle="modal" id_team="" ></a>
<-- Div -->
<div id="mdl" class="modal hide fade" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static"></div>

覆盖Dialog的Bootstrap ' hide '事件并停止其默认行为(以释放对话框)。

请参阅下面的代码片段:

   $('#yourDialogID').on('hide.bs.modal', function(e) {

       e.preventDefault();
   });

它在我们的例子中工作得很好。

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

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

为了在模式显示后更新Bootstrap 4.1.3中的背景状态,我们使用了Bootstrap- modal - wrapper插件中的下面一行。插件存储库代码引用。

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");
$(document).ready(function(e){

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

});

" background:'static'"将阻止关闭模式时,点击它之外; "keyboard: false"指定模式可以由escape键关闭(Esc) "show: false"将在页面加载完成时隐藏模式