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:

I first open a loginModal
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.

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

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;
});

Another solution would be to append and remove the modal from the DOM each time the modal is opened and closed respectively. This way the modal will always be the last one appended to the DOM when it is opened.

Here is the code I've been using:

     // Open the login loginModal
    $scope.openLoginModal = function() {
        $ionicModal.fromTemplateUrl('templates/login.html', {
            scope: $scope
        }).then(function(loginModal) {
            $scope.loginModal = loginModal;

            // Show modal once it's finished loading
            $scope.loginModal.show();
        });
    };

    // Close login modal
    $scope.closeLogin = function() {
        $scope.loginModal.hide();

        // Remove login modal from the DOM
        $scope.loginModal.remove();
    };

You can solve by hiding the modal 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 to keep the loginModal open in background for some reason, you can open and close the loginModal beforehand this way:

function showSignupModal() {
   if (!$scope.loginModal.isShown())
      $scope.loginModal.show();
      $scope.loginModal.hide();
   }
   $scope.signUpModal.show();
 }

来源：https://stackoverflow.com/questions/31629627/ordering-multiple-ionicmodals-on-top-of-each-other

标签

javascript

angularjs

modal-dialog

ionic-framework

ionic