Question

此处解释了$ ionicModal服务的用法：http://ionicframework.com/docs/api/service/ $ ionicModal /

我遇到的情况是我打开了两个以上的模态。

例如：

我首先打开loginModal
在那里，用户点击“openSignUp（）”按钮，打开SignUpModal

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

有没有办法 - 将新模态推到顶部 - 或订购模态？

Answer 1

这是解决此问题的方法：

首先，为类名

定义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;
});

Answer 2

打开模态时，它们会附加到DOM。因此，请记住您打开first的哪个模态，即appended to DOM first。

此外，所有模态都具有相同的css z-index:10。

要理解这种重叠的原因。

Modal1已打开 - ＆gt;获取附加到DOM <body> TAG。
Modal2已打开 - ＆gt;在Modal1之后附加到DOM <body> TAG <div>标记。
Modal3已打开 - ＆gt;在Modal2之后附加到DOM <body> TAG <div>标记。

错误状况：如果Modal3上有一个按钮可以打开Modal2 or Modal1

Modal1或Modal2将在Modal3后面打开。

替代方法：您需要操纵每个模态的z-index，以便无论打开它们的顺序，您点击的最后一个模态应该/将在之前打开的模态上打开。

我无法为您提供快速解决方案，因为它不是一个快速解决方案;但我通过阅读源代码并编辑它来解决它。

以下是我解决问题的方法：A Pull Request到Ionic回购。您可以轻松阅读其中所做的更改，以便进行修复。它基本上都是z-index

Answer 3

另一个解决方案是每次分别打开和关闭模态时，从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();
    };

Answer 4

你可以通过隐藏你不想成为最顶层的模态来解决，例如：

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

但是，如果由于某种原因想要在后台保持loginModal打开，可以事先以这种方式打开和关闭loginModal：

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

将多个IonicModals排在彼此之上

4 个答案: