我正在做一个bootstrap网站，与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
你可以像这样使用一个属性:data- background ="static"或者使用javascript:
$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
也可以看到这个答案:禁止twitter引导模式窗口关闭
其他回答
这个::
$(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>
将此CSS用于模态和模态对话框
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
这可以解决您在Modal中的问题
TLDR
背景:‘静态’
https://getbootstrap.com/docs/3.3/javascript/#modals-options
为背景指定静态，它不会在单击时关闭模式。
如果你不知道模式是否已经打开或者还没有打开，你需要配置模式选项，还有一个选项:
引导3.4
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal').options.keyboard = keyboard;
$modal.data('bs.modal').options.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
引导 4.3+
var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal
if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
$modal.modal({
keyboard: keyboard,
backdrop: backdrop
});
} else { // Modal has already been opened
$modal.data('bs.modal')._config.keyboard = keyboard;
$modal.data('bs.modal')._config.backdrop = backdrop;
if(keyboard === false) {
$modal.off('keydown.dismiss.bs.modal'); // Disable ESC
} else { //
$modal.data('bs.modal').escape(); // Resets ESC
}
}
将选项更改为_config
这个解决方案对我很有效:
$('#myModal').modal({backdrop: 'static', keyboard: false})
与 data-backdrop =“静态”data-keyboard = " false "
在按钮启动模态
