Javascript 将多个IonicModal相互叠加排序

$ionicModal服务的使用说明如下：$ionicModal/

我有一种情况，恰好我打开了两个以上的模态

例如：

function showSignupModal() {
   if ($scope.loginModal.isShown())
      $scope.loginModal.hide();
   $scope.signUpModal.show();
}

我首先打开一个

loginModal

在那里，用户单击一个按钮“openSignUp（）”打开

SignUpModal

然而，有时注册模式会在登录模式下打开。所以我必须关闭登录才能看到它

有什么办法可以做到这一点吗 -将新模式推到顶部

---

-还是叫情态动词

打开模态时，它们会附加到DOM中。因此，请记住您首先打开的

模式，它将
附加到DOM first

而且，所有情态动词都有相同的css
z-index:10

为了理解为什么会发生这种重叠

Modal1
打开->附加到DOM
标记
Modal2
打开->在Modal1的后面附加到DOM
标记
标签
Modal3
打开->在Modal2的后面附加到DOM
标记
标签
错误状况：如果您在
Modal3
上有一个按钮打开
Modal2或Modal1

Modal1
或
Modal2
将在Modal3后面打开

解决方法：您需要操纵每个模式的
z-index
，以便无论它们以何种顺序打开，您单击的最后一个模式都应该/将在以前打开的模式上打开

我不能为你提供一个快速的解决方案，因为它不是一个快速解决方案；然而，我确实通过阅读源代码并对其进行编辑来解决它

下面是我如何解决我的问题的：A到离子回购。
您可以很容易地阅读此处所做的更改，以便进行修复。它的所有基本操作都是z-index

另一个解决方案是在每次打开和关闭模态时分别从DOM中追加和删除模态。这样，打开DOM时，模式将始终是最后一个附加到DOM的模式

以下是我一直在使用的代码：

     // Open the login loginModal
    $scope.openLoginModal = function() {
        $ionicModal.fromTemplateUrl('templates/login.html', {
            scope: $scope
        }).then(function(loginModal) {
            $scope.loginModal = loginModal;

            // Show modal once it's finished loading
            $scope.loginModal.show();
        });
    };

    // Close login modal
    $scope.closeLogin = function() {
        $scope.loginModal.hide();

        // Remove login modal from the DOM
        $scope.loginModal.remove();
    };

---

这就是我为解决这个问题所做的：

首先，为类名定义css样式

.top-modal {
    z-index: 11;
}

然后在初始化过程中添加

top-modal

，修改模态的类名

$ionicModal.fromTemplateUrl('myTopModal.html', {
    scope: $scope,
    animation: 'slide-in-left'
})
.then(function (modal) {
    modal.el.className = modal.el.className + " top-modal";
    $scope.myTopModal = modal;
});

---

您可以通过隐藏不希望位于顶部的模态来解决此问题，例如：

function showSignupModal() {
   if ($scope.loginModal.isShown())
      $scope.loginModal.hide();
   $scope.signUpModal.show();
}

但是，如果出于某种原因希望在后台保持LoginModel打开，可以通过以下方式提前打开和关闭LoginModel：

function showSignupModal() {
   if (!$scope.loginModal.isShown())
      $scope.loginModal.show();
      $scope.loginModal.hide();
   }
   $scope.signUpModal.show();
 }

---

伟大的反思。但是如果您事先知道顺序，它是否也可以通过设置自定义css（例如modal1css等）并在z索引值内工作？是的，如果您事先知道modals的顺序，则可以手动设置z索引。我希望爱奥尼亚团队能尽快解决这个问题。使用style=“z-index:100！important；”尝试了一下，但没有效果。您需要使用class=“background”将其添加到中。这就是指数的背景。不要修改模态本身。这也是可能的（而不是定义css类）：modal.el.style.zIndex=11；非常棒的回答！