防止Bootstrap Modal在外部点击或按下escape时消失？

Question

我正在使用Twitter Bootstrap模式作为向导窗口,并且希望在单击模态外部或按下escape时阻止用户关闭它.相反,我希望在用户按下完成按钮时关闭它.我怎么能实现这种情况？

Answer 1

如果使用JavaScript则:

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

如果是HTML:

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

Answer 2

也适用data-backdrop="static"于点击data-keyboard="false"你的div模式中的Esc:

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

Answer 3

您也可以在Bootstrap模型中使用Direct.

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

Answer 4

只需添加data-backdrop="static"和data-keyboard="false"属性到该模态.

例如.

<a data-controls-modal="your_div_id" data-backdrop="static" data-keyboard="false" href="#">

Answer 5

您可以使用以下代码

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

更改默认行为.

Answer 6

jQuery('#modal_ajax').modal('show', {backdrop: 'static', keyboard: false});

Answer 7

我使用这些属性,它的工作原理, data-keyboard="false" data-backdrop="static"

Answer 8

如果在模态外单击,此代码可防止模态关闭.

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

Answer 9

<button class="btn btn-primary btn-lg" data-backdrop="static" data-keyboard="false" data-target="#myModal" data-toggle="modal">

Answer 10

<button class='btn btn-danger fa fa-trash' data-toggle='modal' data-target='#deleteModal' data-backdrop='static' data-keyboard='false'></button>

只需将data-background和data-keyboard属性添加到打开模型的按钮上即可。

Answer 11

如果您需要禁用外部单击但启用按下转义

$('#myModal').modal({
    backdrop: 'static',   // This disable for click outside event
    keyboard: true        // This for keyboard event
})

Answer 12

The following script worked for me:

// prevent event when the modal is about to hide
$('#myModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

Answer 13

如果您需要在显示模态后进行设置，您可以使用@Nabid 解决方案。但是，有时您仍然需要允许某些方法来关闭模态。假设您有一个带有 class 的按钮really-close-the-modal，它应该真正关闭模态，您可以使用以下代码（jquery）：

var closeButtonClicked = false;

$('.really-close-the-modal').on('click', function () {
    closeButtonClicked = true;
});

$('#myModal').on('hide.bs.modal', function (e) {
    if (!closeButtonClicked) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    }
    closeButtonClicked = false;
});

这不是很好的代码设计，但它在模态显示与加载器动画的情况下帮助我，直到返回 ajax 请求，只有这样我才能知道是否需要配置模态以防止“隐式”关闭。您可以使用类似的设计来防止在加载时关闭模态。