我正在制作一个Bootstrap网站,并使用了一些Bootstrap“模态框”。 我试图自定义一些默认功能。
问题是这样的: 单击背景可以关闭模态框。 有没有办法禁用此功能? 仅在特定的模态框上?
我正在制作一个Bootstrap网站,并使用了一些Bootstrap“模态框”。 我试图自定义一些默认功能。
问题是这样的: 单击背景可以关闭模态框。 有没有办法禁用此功能? 仅在特定的模态框上?
在你提供的链接页面的“选项”章节中,你可以看到 backdrop
选项。将此选项设置为值 'static'
将防止关闭模态框。
正如 @PedroVagner 在评论中指出的那样,你也可以传递 {keyboard: false}
来防止按下 Esc 键关闭模态框。
如果通过 JavaScript 打开模态框:
$('#myModal').modal({backdrop: 'static', keyboard: false})
如果您正在使用数据属性,请使用:
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
Launch demo modal
</button>`
$('#modal').modal('show')
之前。希望这有所帮助! - cwiggodata-bs-toggle
和data-bs-target
属性。 - Marco Siffert这是最容易的一个。
您可以定义模态行为,定义data-keyboard和data-backdrop。
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
data-backdrop="static"
选项,而不是打开模态的触发按钮(如其他答案中所指定的),对我有效。 - TSmithdata-backdrop="static"
或通过 JavaScript:$('#myModal').modal({
backdrop: 'static',
keyboard: false // to prevent closing with Esc button (if you want this too)
})
请参阅此答案:如何禁止Twitter 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;
更改默认行为。
将此代码放在您的模态html的第一个代码块中。
Bootstrap 4.x
data-keyboard="false" data-backdrop="static"
Boostrap 5.x
data-bs-keyboard="false" data-bs-backdrop="static"
示例:
<div id="modal-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-bs-keyboard="false" data-bs-backdrop="static">
文档 Bootstrap 5:https://getbootstrap.com/docs/5.1/components/modal/#options
包括一个 modal-backdrop 元素。或者,指定
static
用于不在点击时关闭模态框的背景。
看这个 ::
$(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>
有两种方法可以禁用 Bootstrap 模态框外部点击关闭模态框:
使用 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.
使用此CSS来创建模态框和对话框
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
这可以解决你在模态框中的问题。
pointer-events: all;
只适用于SVG。 - run_the_race如果您不知道模态框是否已经打开,或者需要配置模态框选项,另一个选择是:
Bootstrap 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
}
}
Bootstrap 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
_setEscapeEvent()
而不是.escape()
吗? - Ivan Bacher