禁止关闭Twitter Bootstrap模态窗口

我正在使用Twitter Bootstrap创建模式窗口。默认行为是，如果您在模态区域之外单击，模态将自动关闭。我想禁用它-即在模态外部单击时不关闭模态窗口。

有人可以共享jQuery代码来执行此操作吗？

我相信您要将背景值设置为static。如果要避免在使用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的答案，但这将允许您更改选项而无需重新初始化模式。

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

或者，如果您需要执行多个选择，那么JavaScript with在这里很方便！

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

如果模态已经打开，则这些选项仅在下次打开模态时才生效。

只需添加这两件事

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和bootstrap，但是根本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>

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

我用一些CSS来隐藏它：

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

注意，使用“ display：none;” 在创建模态时会被覆盖，所以不要使用它。

如果要有条件地禁用该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';

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

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

在模态分频器中。

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

我的问题是类似的，当我装入内部的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：

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

要在显示模式后更新Bootstrap 4.1.3中的背景状态，我们使用了Bootstrap-Modal-Wrapper插件中的以下代码行。插件存储库代码参考。

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