如何防止模态框关闭？

Posted 2023-05-08

【中文标题】如何防止模态框关闭？

【英文标题】：How to prevent modal box to close?

【发布时间】：2018-08-11 05:11:13

【问题描述】：

我有跟踪用户是否在屏幕上活动的功能。函数在 body 元素上寻找 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 的东西。如果有人看到我的代码在哪里失败，请告诉我。

【问题讨论】：

你能创建一个jsfiddle吗？需要看看resetSessionTimeoutreceiveUpdatedTimeRemaining长什么样子

你试过 if(!(target.is('a')) && !(target.data('type') == 'sign_in')) 吗？

请问您使用的是哪个 jQuery modal 插件？我根本看不到模态的配置。您是否提供任何模态配置？

@gmfm 不，我现在试试。

@RandyCasburn 我使用 Bootstrap 3 模式。不确定，但我想我在上面提到过。

【参考方案1】：

为了防止您的模态对话框在鼠标单击背景（页面上的任何位置）时关闭，您必须使用以下配置对其进行配置：

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'); 

作为一种选择。

【讨论】：

我已经测试了你的代码，如果我使用 js 方法，如果我点击屏幕上的任意位置，模态将关闭。如果我将 data-backdrop="static" 添加到我的 div html 中，那么在我单击背景中的任意位置后，对话框将保留在屏幕上。这似乎很奇怪......

我在这里引用你的问题：...如果他们点击页面上的任何地方，模式框就会关闭。如果会话过期，我不希望模式框关闭。。实现这一目标的第一步是防止盒子关闭，以便您确实控制它何时关闭/关闭。

我不确定我是否理解您之前的评论。模态框在两种不同的情况下显示在屏幕上。在第一种情况下，模态框显示在框上，用户应该能够单击屏幕上的任意位置或单击继续按钮，模态框应该关闭。第二种情况是会话过期后。在这种情况下，框只有一个用户选项。他们可以单击链接返回登录页面。如果他们尝试单击其他任何地方，则框不应关闭。我希望这能解释整个情况以及我想要实现的目标。

是的，这很清楚 - 让我回顾一下您的所有代码。那我再来评论。

@espresso_coffee - 请查看我修改后的答案