禁用在引导模态区域外单击关闭模态

我正在做一个bootstrap网站，与一对bootstrap 'Modals'。我正在尝试自定义一些默认功能。

问题在于; 你可以通过点击背景来关闭模式。有没有办法禁用这个功能? 只在特定的情态动词?

引导模态页面

当前回答

对我来说有效的解决方法如下:

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

背景:禁用点击外部事件

键盘:禁用scape关键字事件

2018-07-18 21:42:57

其他回答

这个::

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

2016-11-26 04:43:01

在我的应用程序中，我使用下面的代码通过jQuery显示Bootstrap模态。

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

2016-03-31 18:09:21

这个解决方案对我很有效:

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

与 data-backdrop =“静态”data-keyboard = " false "

在按钮启动模态

2021-01-27 15:24:45

你可以使用

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

更改默认行为。

2017-05-09 17:22:37

把这段代码放在modal html的第一个块中

引导4.倍

-keyboard = "和"日期-backdrop =“静态”

Boostrap 5.倍

data-bs-keyboard = " false " data-bs-backdrop =“静态”

例子:

<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">

文档引导5:https://getbootstrap.com/docs/5.1/components/modal/#options

包括一个情态背景元素。或者，为背景指定静态，它不会在单击时关闭模式。

2021-02-25 04:42:43

禁用在引导模态区域外单击关闭模态

推荐文章

最新文章

标签