不允许关闭Twitter引导模式窗口

你可以禁用后台的点击关闭行为，并通过添加JavaScript到你的页面，使它成为所有modal的默认值(确保它在jQuery和Bootstrap JS加载后执行):

$(function() {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
});

2014-09-30 20:05:26

当背景设置为静态，模式将不会关闭时，点击它外面。点击下面的按钮尝试一下。使用data-bs- background ="static" data-bs-keyboard="false"作为引导5,data- background ="static" data-keyboard="false"作为引导4

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"> </head> <body> <div class="container p-5" > <div class="row text-center"> <div class="col-md-6">  When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-bs-backdrop="static" data-bs-keyboard="false" <button type="button" class="btn btn-primary my-4" data-bs-toggle="modal" data-bs-target="#staticBackdrop"> Launch static backdrop 5 modal </button>  <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Understood</button> </div> </div> </div> </div> </div> <div class="col-md-6">  When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. use data-backdrop="static" data-keyboard="false" <button type="button" class="btn btn-primary my-4" data-toggle="modal" data-target="#exampleModal"> Launch static backdrop 4 modal </button>  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> </div> </div>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script> </body> </html>

2022-04-19 05:43:36

在引导5中属性名已经改变。你可以使用以下方法:

data-bs-backdrop="static" data-bs-keyboard="false"

2021-08-13 08:34:24

如果有人从谷歌来到这里，试图找出如何阻止某人关闭一个模式，不要忘记，在模式的右上方还有一个关闭按钮，需要删除。

我用一些CSS来隐藏它:

#Modal .modal-header button.close {
    visibility: hidden;
}

注意，使用"display: none;"会在创建模态时被覆盖，所以不要使用它。

2014-05-02 15:27:15

有点像@AymKdn的答案，但这将允许您在不重新初始化模态的情况下更改选项。

$('#myModal').data('modal').options.keyboard = false;

或者如果你需要做多个选项，JavaScript的with在这里派上用场!

with ($('#myModal').data("modal").options) {
    backdrop = 'static';
    keyboard = false;
}

如果模式已经打开，这些选项将只在模式下次打开时生效。

2013-04-25 22:10:41

好吧，这是你们中的一些人可能正在寻找的另一种解决方案(就像我一样..)

我的问题是类似的，模态框关闭时，我有里面的iframe正在加载，所以我必须禁用模态解散，直到iframe完成加载，然后重新启用。

这里提出的解决方案并不是100%有效。

我的解决办法是:

showLocationModal = function(loc){

    var is_loading = true;

    if(is_loading === true) {

        is_loading  = false;
        var $modal   = $('#locationModal');

        $modal.modal({show:true});

        // prevent Modal to close before the iframe is loaded
        $modal.on("hide", function (e) {
            if(is_loading !== true) {
                e.preventDefault();
                return false
            }
        });

        // populate Modal
        $modal.find('.modal-body iframe').hide().attr('src', location.link).load(function(){

            is_loading = true;
     });
}};

所以我暂时阻止模态关闭:

$modal.on("hide", function (e) {
    if(is_loading !== true) {
        e.preventDefault();
        return false
    }
});

但是随着变量is_loading将重新启用关闭后Iframe加载。

2015-04-13 14:01:43

不允许关闭Twitter引导模式窗口

推荐文章

最新文章

标签