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

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