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

Ion-content / modal and leaflet map
Popup doesn't completely close when inside modal (v1.1.0)

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?