禁止在引导模式区域外单击以closures模式
我正在制作一个bootstrap网站，附带一些Bootstrap'Modals'。 我试图自定义一些默认function。
问题是这样的; 您可以通过点击背景closures模式。 反正有禁用此function？ 只在特定的模式？
Bootstrap模态页面
在选项章节中，在您链接的页面中，可以看到backdrop选项。 通过这个选项的值'static'将阻止closures模式。
正如@PedroVagner指出的评论，你也可以通过{keyboard: false}来防止按Escclosures模式。
如果你用js打开模式，使用：
$('#myModal').modal({backdrop: 'static', keyboard: false})
如果您正在使用数据属性，请使用：
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false"> Launch demo modal </button>`
你可以使用像这样的属性： data-backdrop="static"或javascript：
$('#myModal').modal({ backdrop: 'static', keyboard: false // to prevent closing with Esc button (if you want this too) })
看到这个答案： 禁止twitter引导模态窗口closures
这是最简单的一个
您可以定义您的模态行为，定义数据键盘和数据背景。
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
在我的应用程序中，我使用下面的一段代码通过jQuery显示Bootstrap模式。
$('#myModall').modal({ backdrop: 'static', keyboard: true, show: true });
您可以使用
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static'; $.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard = false;
改变默认行为。
结帐
$(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>
有两种方法可以禁用自举模型区域之外的点击来closures模态 –
-
使用JavaScript
$('#myModal').modal({ backdrop: 'static', keyboard: false }); -
使用HTML标签中的数据属性
data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
