Ordering multiple IonicModals on top of each other
The use 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:
- First I open
loginModal
- There the user clicks the "openSignUp ()" button which opens
SignUpModal
However, it sometimes happens that the registration modality is open below the login modality. Therefore, I must close the login before I can see it.
Is there a way to either - push a new modal to the top - or order mods?
source to share
When modases are open, they are added to the DOM. So remember which of the modal functions you open first
will be appended to DOM first
.
Also, all modals have the same css z-index:10
.
To understand why this overlap occurs.
-
Modal1
opens -> Added to DOM<body>
TAG. -
Modal2
Opens → Added to DOM<body>
TAG after Modal1<div>
Tag. -
Modal3
opens → Added to DOM<body>
TAG after Modal2's<div>
Tag.
Error condition . If you have a button on Modal3
to openModal2 or Modal1
Will open Modal1
or Modal2
behind Modal3.
WORKAROUND: You need to manipulate z-index
each modal so that in whatever order they open, the last modal click should / open on the previously opened modal.
I can't give you a quick fix because it's not a quick fix, but I solved it by reading the source code and editing it.
This is how I fixed my problem: Pull Request in the Ionic repo. You can easily read the changes made there to fix the errors. It's all mostly manipulationz-index
source to share
Here's what I did to fix this problem:
First define css style for class name
.top-modal {
z-index: 11;
}
Then change the name of the modal class 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;
});
source to share
Another solution would be to add and remove the modal from the DOM every time the modal is opened and closed respectively. This way, the modal will always be the last one added to the DOM when it is opened.
Here is the code I used:
// Open the login loginModal
$scope.openLoginModal = function() {
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(loginModal) {
$scope.loginModal = loginModal;
// Show modal once it finished loading
$scope.loginModal.show();
});
};
// Close login modal
$scope.closeLogin = function() {
$scope.loginModal.hide();
// Remove login modal from the DOM
$scope.loginModal.remove();
};
source to share
You can solve by hiding the modality you don't want to be on top, for example:
function showSignupModal() {
if ($scope.loginModal.isShown())
$scope.loginModal.hide();
$scope.signUpModal.show();
}
However, if you want loginModal to open in the background for any reason, you can open and close loginModal ahead of time like this:
function showSignupModal() {
if (!$scope.loginModal.isShown())
$scope.loginModal.show();
$scope.loginModal.hide();
}
$scope.signUpModal.show();
}
source to share