我正在使用Twitter引导创建一个模态窗口。默认的行为是,如果你点击模式区域之外,模式将自动关闭。我想禁用,即不关闭模式窗口时,点击模式之外。

有人可以分享jQuery代码来做到这一点吗?


当前回答

如果你想有条件地禁用背景单击关闭功能。您可以使用下面的行在运行时将背景选项设置为静态。

引导v3.xx

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

引导v2.xx

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

这将防止已经实例化的模型将背景选项设置为false(默认行为)关闭。

其他回答

我发现最好的是把这个代码添加到链接中

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

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>

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

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

例子:

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

如果你使用JavaScript:

$('#myModal').modal({
  backdrop: 'static',
  keyboard: false
});
<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>

正如D3VELOPER所说,下面的代码解决了它:

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

我使用jquery和bootstrap和简单removeData('modal')不工作。