如何在会话超时时关闭所有活动的引导模式？

Posted 2023-02-22

【中文标题】如何在会话超时时关闭所有活动的引导模式？

【英文标题】：How to close all active bootstrap modals on session timeout?

【发布时间】：2013-08-01 10:20:27

【问题描述】：

我需要在用户空闲时拨打电话并通过会话超时，这将关闭所有 Bootstrap 模式。激活的模态取决于用户当时正在做什么，所以我想做一些无所不包的事情。

我试过了：

$('.modal').modal('toggle');

当发生超时但我的模态仍然存在时。

【参考方案1】：

使用 vanilla JS，您可以执行以下操作

// import all your dependencies
import * as bootstrap from "bootstrap"

// close all modals but the one you want to open
const $modals =  document.querySelectorAll('.modal')
$modals.forEach(modal => 
  let currentModal = bootstrap.Modal.getInstance(modal)
  if (currentModal) currentModal.hide()
)

【参考方案2】：

正确的答案是缺少一些重要的东西。

$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.

如果您希望用户正常使用该页面，第二行至关重要。

【讨论】：

$('.modal').modal('hide') 对我来说效果很好（引导程序 3）。您可能会将此与 jQuery 的 hide() 函数混淆，后者会隐藏模态 div，将灰色背景留在原处。在这种情况下，您将之后需要致电$('.modal-backdrop').remove()。

@Grimbot 否。这是当您使用多个模式时。如果您关闭外部模式而不关闭内部模式，则灰色叠加层会使页面无法使用。

【参考方案3】：

这就是我在不使用任何工厂或其他代码的情况下让它在我的项目中工作的方式。

//hide any open bootstrap modals
  angular.element('.inmodal').hide();

我有一个超时功能，它以$rootScope.$emit('logout'); 发出注销，我的服务中的侦听器如下：

$rootScope.$on('logout', function ()                     
                    //hide any open bootstrap modals
                    angular.element('.inmodal').hide();

                    //do something else here  

                );

如果您想隐藏任何其他模态，例如角度材质对话框 ($mdDialog) 和甜蜜警报对话框，请使用 angular.element('.modal-dialog').hide(); 和 angular.element('.sweet-alert').hide();

我不知道这是否是正确的方法，但它对我有用。

【参考方案4】：

试试这个方法： $('.modal.in:visible').modal('hide');

【参考方案5】：

使用以下代码：

$('.modal').modal('hide');

另外，如果您想在模态框被隐藏的情况下做某事，那么您可以这样做：

$('.modal').on('hidden', function () 
  // write your code
);

【讨论】：

..因为使用toggle 将显示您隐藏的模态并隐藏您显示的模态。

但正如他所提到的，如果一些模态是打开的而一些是关闭的，那么它可能会导致一些问题。所以最好使用更好的安全代码。

我是在说明你回答的原因，我同意，但你没有说明原因。

稍微好一点：$('.modal.in').modal('hide')。无需针对封闭的模态。