不允许关闭Twitter引导模式窗口

覆盖Dialog的Bootstrap ' hide '事件并停止其默认行为(以释放对话框)。

请参阅下面的代码片段:

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

       e.preventDefault();
   });

它在我们的例子中工作得很好。

2014-08-06 11:54:04

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

2017-07-06 09:49:38

如果你已经初始化了模态窗口，那么你可能想用$('#myModal'). removedata ("modal")重置选项。Modal ({background: 'static'， keyboard: false})以确保它将应用新选项。

2012-07-19 16:41:01

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

例子:

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

如果你使用JavaScript:

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

2012-03-27 17:18:05

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

引导v3.xx

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

引导v2.xx

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

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

2016-11-18 15:30:53

当背景设置为静态，模式将不会关闭时，点击它外面。点击下面的按钮尝试一下。使用data-bs- background ="static" data-bs-keyboard="false"作为引导5,data- background ="static" data-keyboard="false"作为引导4

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container p-5" > <div class="row text-center"> <div class="col-md-6">  When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-bs-backdrop="static" data-bs-keyboard="false" <button type="button" class="btn btn-primary my-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Launch static backdrop 5 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 class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> </div> <div class="col-md-6">  When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-backdrop="static" data-keyboard="false" <button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#exampleModal"> Launch static backdrop 4 modal </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script> </body> </html>

2022-04-19 05:43:36

不允许关闭Twitter引导模式窗口

推荐文章

最新文章

标签