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

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


当前回答

在引导5中属性名已经改变。你可以使用以下方法:

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

其他回答

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

例子:

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

如果你使用JavaScript:

$('#myModal').modal({
  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">

它将禁用逃避按钮,也点击任何地方和隐藏。

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

试试主线:

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

你可以禁用后台的点击关闭行为,并通过添加JavaScript到你的页面,使它成为所有modal的默认值(确保它在jQuery和Bootstrap JS加载后执行):

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