Ordering multiple IonicModals on top of each other

Question

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

Answer 1

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 TAG.
2. Modal2 is opened -> Gets appended to DOM TAG after Modal1's
   Tag.
3. Modal3 is opened -> Gets appended to DOM TAG after Modal2's
   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