Ordering multiple IonicModals on top of each other

前端未结

关注

 4  1881

醉话见心

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

相关标签:

4条回答

迷失自我

2021-01-18 22:01

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

0 讨论(0)

自闭症患者

2021-01-18 22:06
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.
1. Modal1 is opened -> Gets appended to DOM <body> TAG.
2. Modal2 is opened -> Gets appended to DOM <body> TAG after Modal1's <div> Tag.
3. 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
0 讨论(0)
发布评论:

提交评论
- 加载中...

情话喂你

2021-01-18 22:13

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

0 讨论(0)

自闭症患者

2021-01-18 22:23

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

0 讨论(0)