在彼此之上订购多个 IonicModal

2022-01-17 00:00:00 angularjs modal-dialog javascript ionic-framework ionic

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

The usage of the $ionicModal service is explained here: http://ionicframework.com/docs/api/service/$ionicModal/

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

I have a situation where it happens that I open more than two modals.

例如:

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

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

However, somethimes it happens that the signup modal is opened below the login modal. So I have to close login before I can see it.

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

Is there a way to either - push the new modal to the top - or to order the modals?

推荐答案

当模态框打开时，它们会附加到 DOM 中.因此，请记住您打开 first 的哪个模态，它将被 首先附加到 DOM.

When modals are opened they are appended to DOM. So remember which ever modal you open first, that will be appended to DOM first.

此外，所有模式都有相同的 css z-index:10.

Also, all modals have same css z-index:10.

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

To understand this why this overlap happens.

  1. Modal1 已打开 -> 附加到 DOM TAG.
  2. Modal2 已打开 -> 在 Modal1 之后附加到 DOM TAG<div> 标签.
  3. Modal3 已打开 -> 在 Modal2 之后附加到 DOM TAG<div> 标签.
  1. Modal1 is opened -> Gets appended to DOM <body> TAG.
  2. Modal2 is opened -> Gets appended to DOM <body> TAG after Modal1's <div> Tag.
  3. Modal3 is opened -> Gets appended to DOM <body> TAG after Modal2's <div> Tag.

Bug 条件:如果您在 Modal3 上有一个按钮可以打开 Modal2 或 Modal1

Bug condition: If you have a button on Modal3 to open Modal2 or Modal1

Modal1 或 Modal2 将在 Modal3 后面打开.

The Modal1 or Modal2 will open behind the Modal3.

解决方法:您需要操作每个模态的 z-index 以便以任何顺序打开它们，您单击的最后一个模态应该/将在以前打开打开模态.

WORKAROUND: You need to manipulate the z-index of each modal so that in whatever order they are opened,the last modal you click should/will open over previously opened modal.

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

I cant provided you with a quick solution, because its not a quick fix;however I did solve it by reading the source Code and editing it.

这是我解决问题的方法:Pull Request 到 Ionic repo.您可以轻松阅读那里所做的更改以进行修复.它基本上都是对 z-index

Here is how I fixed my problem: A Pull Request to Ionic repo. You can easily read the changes done there in order to have a fix. Its all basically manipulation of z-index

相关文章