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

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

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

当前回答

试试主线:

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

2020-07-18 12:26:05

其他回答

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

请参阅下面的代码片段:

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

       e.preventDefault();
   });

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

2014-08-06 11:54:04

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

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

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

2021-08-13 08:34:24

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

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

2014-09-30 20:05:26

$(document).ready(function(e){

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

});

" background:'static'"将阻止关闭模式时，点击它之外; "keyboard: false"指定模式可以由escape键关闭(Esc) "show: false"将在页面加载完成时隐藏模式

2020-09-19 13:07:17

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

推荐文章

最新文章

标签