将多个IonicModals排在彼此之上

Question

将多个IonicModals排在彼此之上

Joh*_*ews 5 javascript modal-dialog angularjs ionic-framework ionic

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

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

例如:

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

但是,有些情况下,注册模式会在登录模式下面打开.所以我必须先关闭登录才能看到它.

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

Answer 1

cru*_*ays 13

这就是我解决这个问题的方法:

首先,为类名定义css样式

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

Run Code Online (Sandbox Code Playgroud)

然后通过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;
});

Run Code Online (Sandbox Code Playgroud)

Answer 2

Kar*_*mar 7

打开模态时,它们将附加到DOM.所以记住你打开过哪种模态first,那就是appended to DOM first.

此外,所有模态都具有相同的CSS z-index:10.

要理解这种重叠发生的原因.

Modal1打开 - >获取附加到DOM <body>TAG.
Modal2打开 - > <body>在Modal1的<div>标签后附加到DOM TAG .
Modal3打开 - > <body>在Modal2的<div>标签之后附加到DOM TAG .

错误情况:如果您Modal3打开了一个按钮Modal2 or Modal1

在Modal1或Modal2将在后面Modal3打开.

变通方法:您需要操纵z-index每个模态的操作,以便无论打开它们的顺序,您单击的最后一个模态应该/将打开以前打开的模态.

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

以下是我解决问题的方法:向Ionic回购拉动请求.您可以轻松阅读其中所做的更改,以便进行修复.它基本上都是操纵的z-index

归档时间：	10 年，11 月前
查看次数：	4059 次
最近记录：	9 年，7 月前