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

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