logo标签列表

禁用在Bootstrap模态框区域外点击以关闭模态框

javascriptcsstwitter-bootstrapmodal-dialog
592

我正在制作一个Bootstrap网站，并使用了一些Bootstrap“模态框”。 我试图自定义一些默认功能。

问题是这样的： 单击背景可以关闭模态框。 有没有办法禁用此功能？ 仅在特定的模态框上？

Bootstrap模态框页面

请问在这种情况下调用了哪个事件，$scope.ok, $scope.$dismiss。我已经实现了提交和中止操作，但是不确定在这种情况下触发了哪个事件。 - LoveToCode
24个回答
1193

在你提供的链接页面的“选项”章节中，你可以看到 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>`
1
有没有一种方法可以让背景能够注册其他控件的点击，但只是不关闭模态框？ - vivekanon
5
@mystikacid，您应该提出一个新问题。这样有助于更好地解决您的问题，并帮助其他寻找类似解决方案的用户。 - Doguita
19
有一个简单但令人烦恼的问题，确保将jQuery行放置在$('#modal').modal('show')之前。希望这有所帮助！ - cwiggo
5
cwiggo，您不需要使用模态框$('#modal').modal('show')；只需使用.modal({backdrop: 'static', keyboard: false})即可，无需任何显示或切换命令。 - TV-C-1-5
2
Bootstrap 5需要data-bs-toggle和data-bs-target属性。 - Marco Siffert
显示剩余2条评论
204

这是最容易的一个。

您可以定义模态行为，定义data-keyboard和data-backdrop。

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
4
这是我用过唯一有效的方法。在JS中直接传入选项对我来说就是行不通的，无论什么原因（版本3.3.7）。如果其他人也有类似经历，我可能会向Bootstrap团队提出问题。 - Dennis Hackethal
1
起初，我也无法使用js版本，因为我是在打开模态框之后设置所有内容的。你应该在这个“$('#modalForm').modal('show');”之前执行这个“$('#modalForm').modal({ backdrop: 'static', keyboard: false });”。但对我来说，最好的答案来自@ಅನಿಲ್。 - Lucas
1
这对我有用。在模态定义上放置 data-backdrop="static" 选项，而不是打开模态的触发按钮（如其他答案中所指定的），对我有效。 - TSmith
2
我已经使用只有 data-backdrop="static" 的方式解决了。你可以在这里看到：https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_backdrop_data&stacked=h - Carmine Checker
106
您可以使用类似这样的属性：data-backdrop="static" 或通过 JavaScript：
$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

请参阅此答案：如何禁止Twitter Bootstrap模态窗口关闭

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static"> 这是最佳答案。 - Kamlesh
47
在我的应用程序中，我正在使用以下代码段通过jQuery显示Bootstrap模态框。
 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
1
这是一个好答案，因为这段代码只有在模态框打开时才能运行。 - Deepak Dholiyan
35

你可以使用

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

更改默认行为。

很棒的答案，因为它处理了所有模态情况。 - Haris ur Rehman
2
在Bootstrap v4中，语法为： $.fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static'; - Garry English
@HarisurRehman 问者希望它只在特定的模态上执行... - Daniel Wu
@DanielWu 取决于你如何理解这个问题。 - Lukas
31

将此代码放在您的模态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 用于不在点击时关闭模态框的背景。

请添加一些解释。您认为您提出的解决方案为什么会对OP有所帮助。 - Tyler2P
1
将此代码放在与 class="modal" 相同的 div 中。 - Daniel Wu
14

看这个 ::

$(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>

14

有两种方法可以禁用 Bootstrap 模态框外部点击关闭模态框：

  1. 使用 JavaScript

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

  2. 在HTML标签中使用数据属性

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
13

使用此CSS来创建模态框和对话框

.modal{
    pointer-events: none;
}

.modal-dialog{
    pointer-events: all;
 }

这可以解决你在模态框中的问题。

如果您想在应用程序中关闭每个模式对话框的最佳选项。 - Piotr Śródka
2
但它会关闭浏览器滚动条 :( - Piotr Śródka
pointer-events: all; 只适用于SVG。 - run_the_race
点击外部时消除背景静态效果的最佳解决方案！ - undefined
12

如果您不知道模态框是否已经打开，或者需要配置模态框选项，另一个选择是：

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

对于Bootstrap 4 +，应该使用_setEscapeEvent()而不是.escape()吗？ - Ivan Bacher
@IvanBacher 使用 .escape() 对我有效。 - Cava
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接