Ordering multiple IonicModals on top of each other

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.

For example:

  1. I first open a loginModal
  2. In there, user clicks on a button "openSignUp()" which opens the 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?

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

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

To understand this why this overlap happens.

  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 condition: If you have a button on Modal3 to open Modal2 or Modal1

The Modal1 or Modal2 will open behind the Modal3.

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.

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