在彼此之上订购多个 IonicModal

Question

这里解释$ionicModal服务的用法：http://ionicframework.com/docs/api/service/$ionicModal/

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

例如：

我先开一个loginModal
在那里，用户点击一个按钮 "openSignUp()" 打开 SignUpModal

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

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

Answer 1

打开模式时，它们会附加到 DOM。所以请记住你打开哪个模式first，那将是appended to DOM first。

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

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

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

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

Modal1或Modal2会在Modal3后面打开。

解决方法： 您需要操纵每个模态框的 z-index，以便它们以任何顺序打开，您单击的最后一个模态框 should/will 打开在之前打开的模态上。

我无法为您提供快速解决方案，因为它不是快速解决方案；但是我确实通过阅读源代码并进行编辑解决了它。

以下是我解决问题的方法：A Pull Request 到 Ionic 存储库。您可以轻松阅读那里所做的更改以便进行修复。基本上都是操纵 z-index

Answer 2

另一种解决方案是在每次打开和关闭模态时分别从 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 3

这就是我为解决此问题所做的工作：

首先，为 class 名称定义 css 样式

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

然后修改模态框的class名称，在初始化时加入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 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();
 }

在彼此之上订购多个 IonicModal

Ordering multiple IonicModals on top of each other

javascript

modal-dialog

angularjs

ionic-framework

ionic