禁止Twitter Bootstrap模式窗口关闭

18 回答

• 305

  只需添加这两件事

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

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

  回复于 2024-04-20T22:33:03+08:00
• 0

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

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

  回复于 2024-04-20T22:33:03+08:00
• 12

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

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

  回复于 2024-04-20T22:33:03+08:00
• 1

  我相信你想将 backdrop value 设置为 static . 如果要在使用Esc键时避免关闭窗口，则必须设置另一个值 .

  例：

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

  或者如果您使用的是JavaScript：

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

  回复于 2024-04-20T22:33:03+08:00
• 4

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

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

  我正在使用jquery和bootstrap，只是 removeData('modal') 不起作用 .

  回复于 2024-04-20T22:33:03+08:00
• 2

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

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

  但是，在加载Iframe之后，将重新启用关闭的var is_loading .

  回复于 2024-04-20T22:33:03+08:00
• 6

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

  回复于 2024-04-20T22:33:03+08:00
• 2

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

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

  回复于 2024-04-20T22:33:03+08:00
• 656

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

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

  回复于 2024-04-20T22:33:03+08:00
• 46

  有点像@ AymKdn的答案，但这将允许您更改选项而无需重新初始化模态 .

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

  或者如果你需要做多个选项，JavaScript的 with 在这里派上用场了！

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

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

  回复于 2024-04-20T22:33:03+08:00
• 34

  是的，你可以这样做：

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

  回复于 2024-04-20T22:33:03+08:00
• 30

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

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

  在你的模态分频器中 .

  回复于 2024-04-20T22:33:03+08:00
• 22

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

  回复于 2024-04-20T22:33:03+08:00
• 11

  如果要有条件地禁用 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 （默认行为） .

  回复于 2024-04-20T22:33:03+08:00
• 208

  只需将 backdrop 属性设置为 'static' 即可 .

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

  您可能还需要将 keyboard 属性设置为 false ，因为这样可以通过按键盘上的Esc键来关闭模态 .

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

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

  回复于 2024-04-20T22:33:03+08:00
• 2

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

  请参阅以下代码段：

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

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

  回复于 2024-04-20T22:33:03+08:00
• 1

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

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

  回复于 2024-04-20T22:33:03+08:00
• 2

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

  我用了一些CSS来隐藏它：

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

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

  回复于 2024-04-20T22:33:03+08:00