Menu
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:
loginModal
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?
236
This is what I did to workaround this problem:
First, define a css style for a class name
.top-modal {
z-index: 11;
}
Then modify the modal's class name by adding in top-modal during initialization
$ionicModal.fromTemplateUrl('myTopModal.html', {
scope: $scope,
animation: 'slide-in-left'
})
.then(function (modal) {
modal.el.className = modal.el.className + " top-modal";
$scope.myTopModal = modal;
});
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.
Modal1 is opened -> Gets appended to DOM <body> TAG.Modal2 is opened -> Gets appended to DOM <body> TAG after Modal1's
<div> Tag.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
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
