Question

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

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

Answer 1

我认为您希望将背景值设置为静态。如果要在使用 Esc 键时避免关闭窗口，则必须设置其他值。

示例：

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

如果您使用的是JavaScript：

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

Answer 2

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

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

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

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

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

Answer 3

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

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

Answer 4

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

Answer 5

覆盖Dialog的Bootstrap“hide”事件并停止其默认行为（以配置对话框）。

请参阅以下代码段：

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

       e.preventDefault();
   });

在我们的案例中它运作良好。

Answer 6

是的，你可以这样做：

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

Answer 7

有点像@ AymKdn的答案，但这样你就可以在不重新初始化模态的情况下更改选项。

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

或者，如果您需要做多个选项，那么JavaScript的with就派上用场了！

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

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

Answer 8

只需添加这两件事

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

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

Answer 9

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

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

Answer 10

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

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

我同时使用jquery＆amp;引导程序只是removeData('modal')无法正常工作。

Answer 11

我找到的最好的是将此代码添加到链接

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

Answer 12

如果有人来谷歌试图弄清楚如何阻止某人关闭模态，请不要忘记在模式右上方还有一个需要删除的关闭按钮。

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

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

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

Answer 13

现在这样做很容易。只需添加：

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

在你的模态分割器中。

Answer 14

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

Bootstrap v3.xx

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

Bootstrap v2.xx

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

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

Answer 15

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

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

Answer 16

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

我的问题很相似，模态框正在关闭，而我内部的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
    }
});

但是，如果在israme加载后将重新启用关闭的var is_loading。

Answer 17

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

Answer 18

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

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

Answer 19

尝试使用以下主线

：

from collections import Counter

def duplicate_encode(word):
    lower_word = word.lower()
    new_word = ''
    counter = Counter(lower_word)
    
    for char in lower_word:
        if counter[char] > 1:
            new_word += ')'
        else:
            new_word += '('
    
    return new_word

Answer 20

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

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

});

“背景：'静态'”将阻止在模式外部单击时关闭模式； “ keyboard：false”指定可以使用退出键（Esc）关闭模式页面加载完成后，“ show：false”将隐藏模式

Answer 21

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

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

<html>
   <head>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
       <body>
       
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
              </div>
              <div class="modal-footer">
                <div class="text-right"><button type="button" class="btn btn-primary">print</button></div>
            </div>
            </div>
          </div>
        </div>
   </body>
</html>

禁止Twitter Bootstrap模式窗口关闭

21 个答案: