如何防止模态盒关闭？

Posted 2021-05-03

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

作为一种选择。