禁止关闭 Twitter Bootstrap 模式窗口

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

例子：

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

或者，如果您使用的是 JavaScript：

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

---

只需将 backdrop 属性设置为 'static'。

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

您可能还希望将 keyboard 属性设置为 false，因为这样可以防止通过按键盘上的 Esc 键关闭模式。

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

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

---

您还可以在模态定义本身中包含这些属性：

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

---

如果您已经初始化了模态窗口，那么您可能需要使用 $('#myModal').removeData("modal").modal({backdrop: 'static', keyboard: false}) 重置选项以确保它将应用新选项。

---

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

请看下面的代码片段：

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

       e.preventDefault();
   });

在我们的情况下它工作正常。

---

是的，你可以这样做：

<div id="myModal"  tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel"
     aria-hidden="true"
     data-backdrop="static"  data-keyboard="false">

---

有点像@AymKdn's answer，但这将允许您在不重新初始化模式的情况下更改选项。

$('#myModal').data('modal').options.keyboard = false;

或者，如果您需要执行多个选项，JavaScript 的 with 在这里会派上用场！

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

如果 modal 已经打开，这些选项只会在下次打开 modal 时生效。

---

只需添加这两件事

data-backdrop="static" 
data-keyboard="false"

现在看起来像这样

<div class="modal fade bs-example-modal-sm" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

它将禁用转义按钮以及单击任意位置并隐藏。

---

您可以禁用背景的点击关闭行为，并通过将此 JavaScript 添加到您的页面将其设为所有模式的默认设置（确保在加载 jQuery 和 Bootstrap JS 后执行它）：

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

---

正如 D3VELOPER 所说，以下代码解决了它：

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

我同时使用 jquery 和引导程序和简单的 removeData('modal') 不起作用。

---

我发现的最好的就是将此代码添加到链接中

<!-- 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>

---

如今，这样做非常容易。只需添加：

data-backdrop="static" data-keyboard="false" 

在您的模态分隔符中。

---

如果有人从 Google 来到这里试图弄清楚如何阻止某人关闭模式，请不要忘记模式的右上角还有一个需要删除的关闭按钮。

我使用了一些 CSS 来隐藏它：

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

请注意，使用“显示：无；”创建模态时会被覆盖，所以不要使用它。

---

如果您想有条件地禁用 backdrop click closing 功能。您可以使用以下行在运行时将 backdrop 选项设置为 static。

引导 v3.xx

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

引导 v2.xx

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

这将阻止已实例化的模型将 backdrop 选项设置为 false（默认行为）关闭。

---

您可以使用以下代码行设置模式弹出窗口的默认行为：

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

---

Bootstrap 5 中的属性名称已更改。您可以使用以下内容：

data-bs-backdrop="static" data-bs-keyboard="false"

---

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>

BS 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>

---

好吧，这是你们中的一些人可能正在寻找的另一种解决方案（就像我一样..）

我的问题是类似的，当我在里面的 iframe 加载时，模式框正在关闭，所以我必须禁用模式关闭，直到 iframe 完成加载，然后重新启用。

此处介绍的解决方案并非 100% 有效。

我的解决方案是这样的：

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

所以我暂时阻止模态关闭：

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

但是 var is_loading 将在 Iframe 加载后重新启用关闭。

---

<button type="button" class="btn btn-info btn-md" id="myBtn3">Static 
Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal3" role="dialog">
<div class="modal-dialog">
  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>
      <h4 class="modal-title">Static Backdrop</h4>
    </div>
    <div class="modal-body">
      <p>You cannot click outside of this modal to close it.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-
      dismiss="modal">Close</button>
    </div>
   </div>
  </div>
</div>
   <script>
    $("#myBtn3").click(function(){
     $("#myModal3").modal({backdrop: "static"});
    });
   });
  </script>

---

根据引导程序 5 更新的语法如下。
Reference Link

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

---

为了在模式显示后更新 Bootstrap 4.1.3 中的背景状态，我们使用了 Bootstrap-Modal-Wrapper 插件中的以下行。 Plugin Repository code reference。

$("#yourModalElement").data('bs.modal')._config.backdrop = (true : "static");

---

尝试主线：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="verifyModalLabel" aria-hidden="true">

---

$(document).ready(function(e){

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

});

"backdrop:'static'" 将阻止在模式外部单击时关闭； "keyboard: false" 指定可以通过转义键 (Esc) 关闭模态框 "show: false" 将在页面完成加载后隐藏模态框

---

作为答案提出的解决方案不起作用，出了什么问题？

$(document).ready(function(){ $('.modal').modal('show'); $('.modal').modal({ background: 'static', keyboard: false }) }) ;

---

When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-bs-backdrop="static" data-bs-keyboard="false" for bootstrap 5 and data-backdrop="static" data-keyboard="false" for bootstrap 4

< !-- Bootstrap 5 CSS -->