如何防止模态盒关闭?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何防止模态盒关闭?相关的知识,希望对你有一定的参考价值。

如果用户在屏幕上处于活动状态,我的功能可以跟踪。功能正在寻找身体元素上的mousedownkeydown事件。但是,如果屏幕上显示模态框并且用户会话仍处于活动状态(它们可以看到计时器和按钮以扩展会话),则此工作正常。如果他们的会话过期,则会显示消息和链接,使他们可以选择返回“登录”页面。一旦用户会话到期,如果他们点击页面上的任何位置,他们就会看到带有链接的消息模式框已关闭。如果会话过期,我不希望模式框关闭。我不确定为什么我的函数没有抓住我正在检查目标元素data-type属性的步骤。这是我的功能的例子:

$('body').on('mousedown keydown', function(event) {
    var target = $(event.target);

    if(!target.is('a[data-type="sign_in"]')){
       lastActivity = new Date();
       if (dialogShowing){
          resetSessionTimeout(receiveUpdatedTimeRemaining);
       }
    }
 });

代码形式我的模态框:

function setupTimeoutDialog() {
        dmSessionBox.html('<div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h2 class="modal-title warning">Your session is about to expire</h2><h2 class="modal-title signedout">You have been signed out</h2></div><div class="modal-body"><div class="row warning"><div class="col-xs-2"><img src="lock1.png" id="imagepreview"></div><div class="col-xs-10">Click the Continue button to extend your session.</div></div><div class="row signedout"><div class="col-xs-2"><img src="lock2.png" id="imagepreview"></div><div class="col-xs-10"><a href="Login.cfm" data-type="sign_in">Return to sign in page</a></div></div></div><div class="modal-footer"><button type="button" id="continueButton" class="btn btn-primary" data-dismiss="modal">Continue</button></div></div></div>');

        window.onbeforeunload = null;
        dmSessionBox.find('#continueButton').on('click', function() {
            log('Continue button')
            lastActivity = new Date();
            resetSessionTimeout(receiveUpdatedTimeRemaining);
        });
    }

我用来显示隐藏元素的一些CSS:

#sessiontimeoutwarning {
    display: none; 
}
#sessiontimeoutwarning .signedout { 
    display: none; 
}
#sessiontimeoutwarning.signedout .signedout { 
    display: block; 
}
#sessiontimeoutwarning.signedout .warning { 
    display: none; 
}

并且在会话过期后处理屏幕的结束功能:

function showBox(showIt) {
        showIt ? $('#sessiontimeoutwarning').modal('show') : $('#sessiontimeoutwarning').modal('hide'); 
    }

function showTimeoutErrorDialog() {
        setupTimeoutDialog();
        dmSessionBox.addClass("signedout").find('button').remove();
        showBox(true); //show modal box
        dialogShowing = true;
        $("#home-container").empty();

        $.ajax({
            type: 'POST',
            url: "Ajax call to close the session",
        }).done(function(){
            console.log('Session destroied.');
        }).fail(function(jqXHR, textStatus, errorThrown){
            alert("Error: "+errorThrown);
        });
    }

一旦会话到期,我不确定为什么模态框正在关闭。它应该保持在屏幕上。也许在那里我不了解Modal Bootstrap。如果有人看到我的代码失败的地方,请告诉我。谢谢!

答案

为了防止鼠标单击背景(页面上的任何位置)关闭模态对话框,必须使用此配置对其进行配置:

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

选项可以通过数据属性或javascript传递。对于数据属性,将选项名称附加到data-,如data-backdrop =“”。

因此,将data-backdrop="static"添加到你的模态<div>似乎很简单

如果您希望在代码中执行此操作,则可以执行以下操作:

$(...).modal({
  backdrop:'static',
  show: false // or true if you want to show it right now
})

编辑

解决这个问题(我不明白):

如果用户登录,则允许模式在任何单击时关闭,否则不允许窗口关闭。

看来,根据你的代码,适应这个条件的最合理的地方是showBox()函数。考虑将第二个参数传递给函数(或使用其他一些源),以指示用户是否已登录。然后:

function showBox(showIt, loggedIn) {
   let backdropClick = loggedIn ? true : 'static';
   let config = {backdrop: backdropClick, show: true}
   showIt 
     ? $('#sessiontimeoutwarning').modal(config) 
     : $('#sessiontimeoutwarning').modal('hide'); 
}

作为一种选择。

以上是关于如何防止模态盒关闭?的主要内容,如果未能解决你的问题,请参考以下文章

如何防止 angular-ui 模态关闭?

如何防止模态框关闭?

在 Ionic 的模态之外单击时如何防止模态消失?

Twitter Bootstrap / jQuery - 如何暂时防止模式被关闭?

使用 jquery 防止 yii 模态弹出窗口关闭

防止模态视频 iframe 加载以前的视频 iframe