cgross / angular-notify

Minimalistic and extensible notification service for Angular.
http://cgross.github.io/angular-notify/demo/
MIT License
432 stars 99 forks source link

click events don't work when ionicModal or ionicPopup are displaying.... #62

Open javacado opened 8 years ago

javacado commented 8 years ago

http://stackoverflow.com/questions/36295476/ionicmodal-disabling-click-events

Here is the text of the question repeated here:

Ionic/cordova/angular/ios application:

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 and an angular-notify message displays, I can't click it. As soon as I click to close the modal (I have to click on my notification since it is overlaying the close button but it still closes 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?

-- UPDATE (Testing in Chrome w/inspector)

It doesn't appear to matter in which order the elements are loaded. Whether the modal, notification overlay or popup load in first, the issue remains.

Click events are cut off for my 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?

javacado commented 8 years ago

I figured it out, at least how to hack around it. $ionicModal and $ionicPopup add a class to the body element <body class='popup-open modal-open'>. I didn't look into how, but it is blocking clicks to my notification.

So I added an interval to the angular-notify notification to remove the modal-open and popup-open classes from $ionicBody.

var notificationInterval;
notificationInterval = $interval(function() {
  $ionicBody.removeClass('modal-open');
  $ionicBody.removeClass('popup-open');
  //  console.log("removing those body classes while the notification is up.");
}, 1000)

For notification dismissal, I added to the $scope.$close function

$interval.cancel(notificationInterval)
SANGED commented 6 years ago

Same issues for me!!!