Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
javacado opened this issue Mar 30, 2016 · 2 comments
Open

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

javacado opened this issue Mar 30, 2016 · 2 comments

Comments

@javacado
Copy link

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
Copy link
Author

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
Copy link

SANGED commented Feb 7, 2018

Same issues for me!!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@javacado @SANGED