jQuery: Freezing/Disabling all events temporarily? - javascript

I have the following usecase:
A div with some buttons
When the user
clicks on a button, a popup is shown
and the background div is faded out
to 0.5 opacity
The problem is that when the popup comes in, the user is still able to click on the background buttons. At this point, I can remove the entire DIV temporarily but I don't want to do that. Is there anyway I can disable all the previously attached events and then add event handlers ONLY to the current popup? (I mean something like a close button should still work on a popup) Any suggestions?

Sounds like you need a modal popup. There are numerous jQuery plugins that do that, or you can check out this tutorial.

You could store each element with an attached event into an array, then loop through them and unbind() them. Upon closing the popup you can re-bind() them.

You can use the modal dialog option built into JQuery UI
http://jqueryui.com/demos/dialog/#modal
$("#dialog-modal").dialog({
modal: true
});

Related

onbeforeunload change the UI of dialog box or use custom

I have a page where if user click anywhere outside form or try to close the tab a dialog box/popup should come like your changes will be discard or do you want to move.
I can do this from window.onbeforeunload event but the problem is that i need to use a customized pretty dialog box instead of default one if any alternate approach is there.
If we use any modal dialog box but i don't know which event to call on that dialog also tried window.onload but it not fulfill my problem as i need to ask the viewer before moving to other page.

Fancybox3 with iFrame - prevent close on overlay click

I am using Fancybox3 to open iframe in popup, but I need deny close on click on overlay, because in iframe is form, which user must fill out.
I tried edit outsideClick parameter 'close' to 'false' in fancybox.js and this guide too, but it's still closing on click on overlay.
Can somebody help me? Thanks.
Simply use clickSlide option. v3 works as a slider and is highly customizable (for example, you can resize and/or reposition sliding area), therefore there is a seperate options for clicking the slide and overlay element.

Hide page elements without deactivating their events

I am working on a simple HTML/JS/Jquery game where you are supposed to look for a hidden vegetable on the page.
I have an image placed on the screen randomly on page load but it is hidden. When the user clicks on the image I want it to appear.
I tried using Jquery hide/show. This works fine if the image starts visible however, it fires the onclick event nicely. If the image starts as hidden it deactivates the onclick event. I know I am clicking on the correct spot on the page but the event never fires.
I tried using $("#image").css("display", "none");however this also deactivates the onclick. Is there another means of hiding an element that does not deactivate it's events?
You could use $("#image").css("opacity", "0");
$(document).ready(function(){
$("#image").hide();
)};
when u return to show
$("#image").show();
or
$("#image").style("opacity", "0");

ionicModal disabling click-events

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:
<div class="click-block click-block-hide"></div>
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?
Can you explain the layout a bit better? Is the ionicModal sitting on top of the message? Or are they side by side?
If the modal is sitting above the message, then it is a matter of z-index. You need to make sure that the z-index for the class that is being used isn't overriding the z-index of 99999.
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)

How to get jquery to reuse element identities re-loaded via AJAX correctly?

I'm not sure I've diagnosed this problem correctly.
I have a jquery dialogue that pops up another jquery dialog. When I pop up the inner dialog
once everything seems to work. when I close both dialogues and reopen them the "save" button on the
inner dialogue does not work right -- in particular it doesn't close the dialog.
What I think is happening: The second time the content for the second dialogue is reloaded
via AJAX using the same DOM id's as the first time, and when jquery tries to close the dialogue
it tries to close the "old" dialogue which no longer exists (or at least is not visible).
Am I right? If so how to get jquery to forget the old element and use the new one?
If you want to see the problem yourself:
go to http://ibidreview.appspot.com/Teach/Edit?eid=1DemoE&owner=
click the first "change question" button. First dialog should show.
click the "html" pseudo-link. Second dialog should show.
click "save" on inner dialog. Inner dialog should close
click "change" on first dialog. First dialog should close.
Now repeat steps 2,3,4 and notice that on step 4 the inner dialog does not close.
I will stop trying to fix this for a while so the steps will work the same... Thanks in advance!
Take a look at the live() event handler. This will ensure that the element will still fire the event after being destroyed or recreated. http://api.jquery.com/live/
Use something like this:
$(button).live('click', function() {
$(form).save(); //save the form
$(menu).close(); //close the menu
});

Categories