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

Question

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

我试过：

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

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

Answer 1

使用以下代码：

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

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

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

Answer 2

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

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

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

Answer 3

试试这种方式： $('.modal.in:visible').modal('hide');

Answer 4

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

//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();

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

Answer 5

使用 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()
})