540

我将 Twitter Bootstrap 模式用作向导窗口，并希望防止用户在单击模式外部或按下退出键时关闭它。相反，我希望它在用户按下完成按钮时关闭。我怎样才能实现这种情况？

4

16 回答 16

1023

如果使用 JavaScript，那么：

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

或在 HTML 中：

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
于 2013-04-22T20:11:15.503 回答
311

也可以在您的 div 模式data-backdrop="static"中单击并data-keyboard="false"Esc ：

<div id="idModal" class="modal hide" data-backdrop="static" data-keyboard="false">
于 2014-01-07T15:50:04.107 回答
83

您也可以在引导模型中使用 Direct。

<div class="modal fade" id="myModal" data-keyboard="false" data-backdrop="static">
于 2018-04-12T10:11:16.267 回答
43

只需向该模式添加data-backdrop="static"和属性。data-keyboard="false"

例如。

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">
于 2016-07-14T12:37:49.150 回答
27 
<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

只需将 data-backdrop 和 data-keyboard 属性添加到打开模型的按钮即可。

于 2019-01-13T10:14:11.587 回答
27

您可以使用下面的代码

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';

更改默认行为。

于 2015-08-19T21:06:23.823 回答
21 
jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});
于 2016-09-01T06:15:01.587 回答
18

我使用这些属性并且它有效，data-keyboard="false" data-backdrop="static"

于 2017-10-04T13:04:04.893 回答
15

如果您在模态框外单击，此代码将阻止模态框关闭。

   $(document).ready(function () {
    $('#myModal').modal({
           backdrop: 'static',
           keyboard: false
    })
   });
于 2019-01-05T19:10:10.857 回答
12 
<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">
于 2016-10-26T06:14:18.617 回答
6

如果您需要禁用单击外部但启用按 Escape

$('#myModal').modal({
    background: 'static', // 这对点击外部事件禁用
    keyboard: true //这用于键盘事件
})
于 2016-06-04T04:56:07.880 回答
6

以下脚本对我有用：

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});
于 2017-07-12T05:03:55.857 回答
5

如果您需要在显示模态后进行设置，您可以使用@Nabid 解决方案。但是，有时您仍然需要允许某些方法来关闭模式。假设您有一个带有 class 的按钮really-close-the-modal，它应该真正关闭模式，您可以使用以下代码（jquery）：

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

这不是很好的代码设计，但它在模态与加载器动画一起显示的情况下帮助了我，直到 ajax 请求返回，然后我才能知道是否需要配置模态以防止“隐式”关闭。您可以使用类似的设计来防止在模态仍在加载时关闭它。

于 2018-08-06T08:36:42.503 回答
3

你应该使用背景静态，键盘假。并且可以使用 jQuery 关闭关闭按钮，也可以从模态 html 中删除。希望这有帮助。

 $('#MyModal').modal({ backdrop: 'static', keyboard: false });
    $('#MyModal .close').css('display','none');
于 2019-04-15T08:47:55.570 回答
1

当我在模态框旁边单击时，您的代码正在工作，但是如果我input在模态框体内使用 html 字段，则将光标聚焦在该输入上，然后按下esc键模态框已关闭。点击这里

于 2016-07-13T05:15:34.017 回答
0 
<div class="modal show">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">     

    <h4 class="modal-title">Modal title</h4>
     </div>
     <div class="modal-body">
      <p>One fine body&hellip;</p>
  </div>

  </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

我认为这个 codepen 可以帮助你 防止模态关闭 css 和 bootstrap

于 2017-01-22T07:36:07.117 回答