Using Popups in Modals


#1

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)

Codepen: http://codepen.io/dangeross/pen/wvAjJ/

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)
#2

hmm, odd. I just made an issue an I’m looking into it: https://github.com/driftyco/ionic/issues/838


#3

Adam just fixed it. Thanks!


#4

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.


#5

Wow. Awesome. Thanks for the quick response guys!


#6

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?


#7

having the same problem… any help is appreciated


#8

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

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


#9

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


#10

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.


#11

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

can someone help?