禁用引导模态区域之外的单击以关闭模态_a-modal 点击其它地方不允许关闭-优快云博客

本文翻译自：Disable click outside of bootstrap modal area to close modal

I am making a bootstrap website, with a couple of Bootstrap 'Modals'. 我正在制作一个Bootstrap网站，其中包含几个Bootstrap'Modals'。 I'm trying to customize some of the default features. 我正在尝试自定义一些默认功能。

Problem is this; 问题是这样； You can close the modal by clicking on the background. 您可以通过单击背景关闭模态。 Is there anyway to disable this feature? 反正有禁用此功能？ On specifc modals only? 仅在特定模态上？

Bootstrap modal page 引导程序模式页面

#1楼

参考：https://stackoom.com/question/1VB9V/禁用引导模态区域之外的单击以关闭模态

#2楼

You can use an attribute like this: data-backdrop="static" or with javascript: 您可以使用如下属性： data-backdrop="static"或javascript：

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

See this answer too: Disallow twitter bootstrap modal window from closing 也请参见此答案：禁止关闭Twitter Bootstrap模式窗口

#3楼

On Options chapter, in the page you linked, you can see the backdrop option. 在“选项”一章的链接页面中，您可以看到backdrop选项。 Passing this option with value 'static' will prevent closing the modal. 将此选项的值设置为'static'将防止关闭模态。
As @PedroVagner pointed on comments, you also can pass {keyboard: false} to prevent closing the modal by pressing Esc . 正如@PedroVagner在评论中指出的那样，您还可以通过按Esc来传递{keyboard: false}以防止关闭模式。

If you opening the modal by js use: 如果您通过js打开模式，请使用：

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

If you are using data attributes, use: 如果使用数据属性，请使用：

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`

#4楼

This is the easiest one 这是最简单的一个

You can define your modal behavior, defining data-keyboard and data-backdrop. 您可以定义模态行为，定义数据键盘和数据背景。

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

#5楼

In my application, I am using the below piece of code to show Bootstrap modal via jQuery. 在我的应用程序中，我使用下面的代码通过jQuery显示Bootstrap模态。

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });

#6楼

Checkout This :: 结帐此::

 $(document).ready(function() { $("#popup").modal({ show: false, backdrop: 'static' }); $("#click-me").click(function() { $("#popup").modal("show"); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="modal" id="popup" style="display: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3>Standard Selectpickers</h3> </div> <div class="modal-body"> <select class="selectpicker" data-container="body"> <option>Mustard</option> <option>Ketchup</option> <option>Relish</option> </select> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a id="click-me" class="btn btn-primary">Click Me</a> </body> <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script> </html>