【问题标题】：How to check if a Bootstrap UI modal is open? - AngularJS如何检查 Bootstrap UI 模式是否打开？ - AngularJS
【发布时间】：2016-09-30 12:43:40
【问题描述】：

如果已经打开了一个模式，我的应用程序可以打开一个模式。如果是这种情况，我想关闭该模式并在完成后打开新模式。

打开模态的服务：

app.service('ModalService', function($uibModal) {
this.open = function(size, template, content, backdrop, controller) {
    var modalInstance = $uibModal.open({
        animation: true,
        templateUrl: content,
        windowTemplateUrl: template,
        controller: controller,
        backdrop: backdrop,
        size: size,
        resolve: {}
    });
    return modalInstance;
};

然后我打开一个：

var m = ModalService.open('lg', '', 'ng-templates/modal.html', true, 'ModalController');

我可以关闭它：

m.close();

我只能在打开模式时在同一个开关/案例中使用 m.close()。如果我想在代码后面的另一个 if 语句中关闭它，则 m 未定义。

无论如何。我可以检查模式是否打开吗？如果我 console.log(m) 是这样的：

d.$$state.status = 1
d.$$state.value = true

但我无法在应用程序的其他位置访问变量 m，因此无法检查。

【问题讨论】：

标签： javascript angularjs angular-ui-bootstrap angular-ui

【解决方案1】：

只需向您的ModalService 添加一个标志或吸气剂。

app.service('ModalService', function($uibModal) {
var open = false,
    modalInstance;

this.isOpen = function () {
  return open;
};

this.close = function (result) {
  modalInstance.close(result);
};

this.dismiss = function (reason) {
  modalInstance.dismiss(reason);
};

this.open = function(size, template, content, backdrop, controller) {
    var modal = $uibModal.open({
        animation: true,
        templateUrl: content,
        windowTemplateUrl: template,
        controller: controller,
        backdrop: backdrop,
        size: size,
        resolve: {}
    });

    //Set open
    open = true;

    //Set modalInstance
    modalInstance = modal;

    //Modal is closed/resolved/dismissed
    modal.result.finally(function () {
      open = false;
    });

    return modal;
};
}

然后您可以致电：ModalService.isOpen() 检查您的模态是否已打开。

【讨论】：

相当整洁，会试一试并报告。谢谢。
这行得通。知道如何关闭模式吗？我现在用 $rootScope.m 替换了 var m ，它允许我在我的应用程序中的任何地方访问 m 。想知道是否有更好的解决方案。 $rootScope.m = ModalService.open('lg', '', 'ng-templates/modal.html', true, 'ModalController');然后我这样做： $rootScope.m.close();
只需将modalInstance 像open 存储为局部变量并实现附加功能（例如：ModalService.closeModal()）并关闭服务内的模式。问题是为什么要从其范围之外关闭模式。
我可能需要从另一个控制器或另一个 if 语句中关闭它。使用 var 不起作用，但 $rootScope.variable 可以。
我进行了编辑并添加了 ModalService.dismiss(reason) 和 ModalService.close(result) 方法。我离开了检查是否设置了modalInstance，您应该在代码中使用它之前添加它。

【解决方案2】：

非常简单：

由于$uibModal 总是使用类名modal 的div，您只需检查是否存在具有该类名的任何元素：

//If no modal is open
if (document.getElementsByClassName("modal").length === 0) {
  //do something...
} else {
  // do something when a modal is open
}

【讨论】：

嗯，那是脏检查，并不是最好的解决方案，尤其是如果您同时打开多个模式。

【解决方案3】：

由于 $uibModal 服务不提供，最精简的方法是检查 body 上的“modal-open”类：

document.body.className.indexOf('modal-open') !== -1

【讨论】：