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

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

引导模态页面


当前回答

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

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

背景:禁用点击外部事件

键盘:禁用scape关键字事件

其他回答

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

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

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

在按钮启动模态

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

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

你可以使用

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

更改默认行为。

你也可以不使用JQuery做到这一点,如下所示:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

试试这个,在我的应用程序开发…我还遇到了一个麻烦,模型属性的默认值=> data-keyboard="true", => data- background ="非静态"

希望这对你有所帮助!