问题描述
这里解释了$ ionicModal服务的用法： ：//ionicframework.com/docs/api/service/ $ ionicModal /
我遇到的情况是我打开了两个以上的模态。
例如：
-
我先打开一个
loginModal -
在那里，用户点击“openSignUp（）”按钮，打开
SignUpModal
但是，有些情况下，注册模式会在登录模式下面打开。 所以我必须先关闭登录才能看到它。
有没有办法要么 - 将新模态推到顶部 - 或者订购模态？
1楼
cruellays
13
2016-08-26 08:51:31
这是我解决这个问题的方法：
首先，为类名定义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;
});
2楼
Karan Kumar
7
已采纳
2015-07-25 18:37:50
打开模态时，它们将附加到DOM。
所以请记住你first打开哪个模态，然后first将它appended to DOM first 。
此外，所有模态都具有相同的css z-index:10 。
要理解这种重叠发生的原因。
-
Modal1打开 - >获取附加到DOM<body>TAG。 -
Modal2打开 - >在Modal1的<div>标记之后，将附加到DOM<body>TAG。 -
Modal3打开 - >在Modal2的<div>标签之后，将附加到DOM<body>TAG。
错误条件 ：如果您在Modal3上有一个按钮来打开Modal2 or Modal1
Modal1或Modal2将在Modal3后面打开。
变通方法：您需要操纵每个模态的z-index ，以便无论打开它们的顺序，您单击的最后一个模态应该/将在先前打开的模态上打开。
我无法为您提供快速解决方案，因为它不是一个快速解决方案;但我通过阅读源代码并编辑它来解决它。
以下是我解决问题的方法：向Ionic回购 。
您可以轻松阅读其中所做的更改，以便进行修复。
它基本上都是对z-index操纵
3楼
Jack
1
2016-07-18 17:09:06
另一种解决方案是每次分别打开和关闭模态时从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();
};
4楼
dom
0
2016-10-30 15:49:35
您可以通过隐藏您不希望位于顶部的模态来解决，例如：
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();
}