ionicModal disables clicks?

I am using angular-notify to display overlay messages that have ng-click events attached. They show up fine and the ng-click events register EXCEPT when an ionicModal is open - while it’s open, I can’t click the notification overlays. As soon as I click to close the modal the ng-click registers again.

I am not sure how to test this theory, but it feels like the click is getting captured or disabled by ionicModal. Is there something I can do (z-index is set to 99999) to make those clicks get registered?

Ionic team - I am trying to understand how ionicModal and ionicPopup affect global click events.

Here is what I am seeing:

  • My notification (via angular-notify) has a click event which shows fine (the z-index is the highest), and the click event works except when an ionicModal or ionicPopup are displaying. When either of those display, click events are cut off for my little notification overlay until the modal and/or popup are dismissed.

When I look at the DOM inspector, I see some divs are created when the popup or modal instantiates. This one:

looks like it might be causing my issues but it sits lower in the DOM and when I delete the element (in Chrome Inspector) it doesn't fix my issue.

No matter what z-index I set or where I move the element in the DOM (via inspector) or what background div elements I delete, I still cant click my notification until any and all popup/modals are dismissed.

Any thoughts?

Hello friend,
I know I’m months late, but I had the same issue now and I figured out what’s happening.

On each modal-open a class “modal-open” is added to the body, and that class has a following style

.modal-open {
    pointer-events: none;

Just set it in your css to:

.modal-open {
    pointer-events: auto !important;

Hope it saves some time to anyone who visits this thread! :slight_smile:


Thanks! I should have investigated the css. I assumed there was some javascript acting on the className. This simplifies my approach

1 Like