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

当背景设置为静态，模式将不会关闭时，点击它外面。点击下面的按钮尝试一下。使用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

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>

2022-05-30 04:16:05

有点像@AymKdn的答案，但这将允许您在不重新初始化模态的情况下更改选项。

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

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

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

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

2013-04-25 22:10:41

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

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

2014-05-15 16:52:03

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

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

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

2015-09-16 08:31:52

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

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

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

推荐文章

最新文章

标签