禁用在bootstrap模态区域外单击以关闭模态-Java 学习之路

300

我正在制作一个引导程序网站，其中包含几个Bootstrap'Modals' . 我正在尝试自定义一些默认功能 .

问题是这样的;您可以通过单击背景关闭模态 . 反正有禁用此功能吗？仅限于特定模态？

13 回答

-1
这是最简单的一个

您可以定义模态行为，定义数据键盘和数据背景 .
```
<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
```
回复于 2024-04-28T05:05:35+08:00

-1

在我的应用程序中，我使用下面的代码来通过jQuery显示Bootstrap模式 .

$('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });

回复于 2024-04-28T05:05:35+08:00

您可以使用

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

更改默认行为 .

回复于 2024-04-28T05:05:35+08:00

90
在选项章节中，在您链接的页面中，您可以看到 backdrop 选项 . 传递值为 'static' 的此选项将阻止关闭模态 .
正如@PedroVagner指出评论，你也可以传递 {keyboard: false} 以防止按Esc关闭模态 .

如果你用js打开模态，请使用：
```
$('#myModal').modal({backdrop: 'static', keyboard: false})
```
如果您使用的是数据属性，请使用：
```
<button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
```
回复于 2024-04-28T05:05:35+08:00
0
您可以使用以下属性： data-backdrop="static" 或使用javascript：
```
$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})
```
也看到这个答案：Disallow twitter bootstrap modal window from closing
回复于 2024-04-28T05:05:35+08:00

663

结帐本::

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

回复于 2024-04-28T05:05:35+08:00

有两种方法可以禁用bootstrap模型区域外的click以关闭模态 -

using javascript

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

using data attribute in HTML tag

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

回复于 2024-04-28T05:05:35+08:00

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

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
    }
}

回复于 2024-04-28T05:05:35+08:00

6
对我有用的解决方案如下：
```
$('#myModal').modal({backdrop: 'static', keyboard: false})
```
background：禁用click outside事件

键盘：禁用scape关键字事件
回复于 2024-04-28T05:05:35+08:00
-1
对我来说，bootstrap模态和jQuery模式之间存在混淆 . 这样做了（对于jQuery modal）
```
$("#sticky").modal({
  escapeClose: false,
  clickClose: false,
  showClose: false
});
```
回复于 2024-04-28T05:05:35+08:00

根据您的屏幕宽度添加以下css .

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}

回复于 2024-04-28T05:05:35+08:00

您也可以在不使用JQuery的情况下执行此操作，如下所示：

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

回复于 2024-04-28T05:05:35+08:00

1

TLDR

backdrop: 'static'

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

为不关闭单击模式的背景指定静态 .

回复于 2024-04-28T05:05:35+08:00

禁用在bootstrap模态区域外单击以关闭模态

13 回答

TLDR

相关问题