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

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

引导模态页面


当前回答

如果你想禁用所有使用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');
    });
});

其他回答

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

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

背景:禁用点击外部事件

键盘:禁用scape关键字事件

你可以像这样使用一个属性:data- background ="static"或者使用javascript:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

也可以看到这个答案:禁止twitter引导模式窗口关闭

如果你不知道模式是否已经打开或者还没有打开,你需要配置模式选项,还有一个选项:

引导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

TLDR

背景:‘静态’

https://getbootstrap.com/docs/3.3/javascript/#modals-options

为背景指定静态,它不会在单击时关闭模式。

这是最简单的

你可以定义你的模式行为,定义数据键盘和数据背景。

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">