Using Popups in Modals

Hi there,

Can someone point me in the right direction, I am trying to display a $ionicPopup over a $ionicModal. So the modal is open and the user needs to select an item from a list in a popup. But it looks like the modal still has focus even tho the popup is over it.

I have I feeling it might be an issue with z-index’s and/or translate3d(0px, 0px, 0px)


Would very much appreciate some help,
Thanks, Ross

hmm, odd. I just made an issue an I’m looking into it:

Adam just fixed it. Thanks!

This should be fixed now in the nightly build:

It’s because .modal-open was added to the body class also, and that disables all pointer-events except the .modal, which is a good thing for tap stuff so inputs weren’t clicked which are under the modal. It’s also used so other buttons can’t get clicked in the grayed out area of a actionsheet or popup.

Thanks for reporting it.

Wow. Awesome. Thanks for the quick response guys!

I’ve noticed that when I use a popup in a modal the backdrop doesn’t appear over the modal. Probably because it was already activated by the modal.

Do you have a solution to have this backdrop for my popup in a modal?

having the same problem… any help is appreciated

.popup-open .backdrop {
z-index: 11;

putting this in css helps, but i think it should be done by default

the same problem exists when i have a modal open and then show ionicLoading… the backdrop shoudl overlay the modal, but it doesnt… and as ionicLaoding doesnt add a css class to body, i cant workaround… i guess i just open a github issue to get more attention

We have the same problem with some Facebook dialogs (Facebook share) loaded on top of a modal.

Till now we applied a similar fix to yours @adam but any modal/dialog/popup on top a modal will be affected. Maybe we can find another way to deal with that.

Hello i have the similar problem with popup and list in it

can someone help?