How to show backdrop behind modal

1

Hi

the ionic backdrop grays out the modal too when I do this:

$scope.openBrandModal = function() {
    $ionicBackdrop.retain();
    $scope.brandModal.show();
  };

How can I grey out only the view behind the modal and not the modal ?

Thanks

2

Can someone help me with this please ?

3

Hi,

I have never used the ionic backdrop, put I am pretty sure if you put a z-index (in css) higher for the modal, it will work.

But I believed, the ionic modal already has a backdrop, hasnt it ?

4

Hi @gensollen, the ionic modal doesn’t seem to have a backdrop no. Too bad, this could be a good feature.

I am going to try with z-index.

5

Are you sure about that ?

Look here : http://codepen.io/ionic/pen/gblny

And you can set if you want the backdrop to be able to close the modal.

6

indeed I see the backdrop in this codepen. But in my case there’s no backdrop around the modal.

How do you set if you want the backdrop to close the modal or not?

7

Actually I see the backdrop div when I inspect my code, but it is not apparent, but it’s not rendered…argh I can’t understand why !!

8

If you’re having this problem on mobile, it’s because the style uses a media query for screens over 680px. I worked around it by adding the same styles in my own stylesheets, so it applies the styles always, regardless of screen size:

.modal-backdrop-bg {
    transition: opacity 300ms ease-in-out;
    -webkit-transition: opacity 300ms ease-in-out;
    background-color: #000;
    opacity: 0;
}

.active .modal-backdrop-bg {
    opacity: 0.5;
}

You could also just change the media query in ionic’s CSS, but since I’m working with Meteor, the CSS files are included differently. I think this way is cleaner, in any case.

Hope this helps!

2 Likes
9

Yes you’re right that’s it !
Perfect!
Thanks for your help :slight_smile:

10

It works. But when the modal opens it also (modal) is gray colored. Is there anyway to prevent that ?

11

excuse me! where do you put the class?? And where you call it?
i can´t show the backdrop

12

Hi,

In app.scss I use like below

// For all modals open within 767px devices
@media (max-width: 767px) {
ion-modal.show-page {
background-color: #0000006e;
text-align: -webkit-center;
}

.modal-wrapper {
    width: 90%;
    border-radius: 5px;
    height: 70%;
    margin-top: 20%;
}

}

13

Hey bro. This is perfect but this does not work for backdrop dismiss. Anyone knows how to do that?