jQuery: Freezing/Disabling all events temporarily?

Question

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?

Answer 1

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

Answer 2

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.

Answer 3

You can use the modal dialog option built into JQuery UI

http://jqueryui.com/demos/dialog/#modal

$("#dialog-modal").dialog({
                   modal: true
                   });