我正在做一个bootstrap网站，与一对bootstrap 'Modals'。 我正在尝试自定义一些默认功能。
问题在于; 你可以通过点击背景来关闭模式。 有没有办法禁用这个功能? 只在特定的情态动词?
引导模态页面
当前回答
你也可以不使用JQuery做到这一点，如下所示:
<div id="myModal">
var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
其他回答
这个解决方案对我很有效:
$('#myModal').modal({backdrop: 'static', keyboard: false})
与 data-backdrop =“静态”data-keyboard = " false "
在按钮启动模态
将此CSS用于模态和模态对话框
.modal{
pointer-events: none;
}
.modal-dialog{
pointer-events: all;
}
这可以解决您在Modal中的问题
如果你不知道模式是否已经打开或者还没有打开，你需要配置模式选项，还有一个选项:
引导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
你也可以不使用JQuery做到这一点，如下所示:
<div id="myModal">
var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
如果你想禁用所有使用jQuery的模态的外部点击，使用这个。在jQuery之后添加这个脚本到你的Javascript。
jQuery(document).ready(function () {
jQuery('[data-toggle="modal"]').each(function () {
jQuery(this).attr('data-backdrop','static');
jQuery(this).attr('data-keyboard','false');
});
});
