I want to close the dialog box when you click outside of the dialog, but I'm not sure how you test that in jquery/plain javascript.

Some have suggested using the blur event, but this doesn't seem to be supported by jquery dialog.

EDIT I have this question too but cannot make do with any of the currently supplied answers, since I cannot make my dialog boxes modal.

I need this so that I can register key handlers only when a dialog is top most, and de-register them as soon as another dialog is brought to the top.

Does anyone have a solution - ideally one that results in an event being raised each time some other dialog comes to the top?

I want to close the dialog box when you click outside of the dialog, but I'm not sure how you test that in jquery/plain javascript.

Some have suggested using the blur event, but this doesn't seem to be supported by jquery dialog.

EDIT I have this question too but cannot make do with any of the currently supplied answers, since I cannot make my dialog boxes modal.

I need this so that I can register key handlers only when a dialog is top most, and de-register them as soon as another dialog is brought to the top.

Does anyone have a solution - ideally one that results in an event being raised each time some other dialog comes to the top?

• javascript
• jquery
• dialog

8 Answers 8

Pure jQueryUI no modal dialog.

Example:

http://jsfiddle.net/marcosfromero/x4GXy/

Code:

// Bind the click event to window
$(window).click(function(event) {
    if (($(event.target).closest('.ui-dialog')).length>0) {
        // if clicked on a dialog, do nothing
        return false;
    } else {
        // if clicked outside the dialog, close it
        // jQuery-UI dialog adds ui-dialog-content class to the dialog element.
        // with the following selector, we are sure that any visible dialog is closed.
        $('.ui-dialog-content:visible').dialog('close');

    }
})

Can you make your dialog modal? If so, then you can (probably) achieve what you're after by events on the modal overlay...

Completely hacky, untested idea, but it might just work...

Modal dialogs create events called click.dialog-overlay, etc... These are fired when the mouse is clicked outside the dialog, on the modal overlay. Hooking those events and closing the dialog might just do what you're trying to do...

The blur event is not quite what you're looking for. The blur event occurs on a single element. What you are looking for is when a user clicks "outside" a particular group of elements - everything below a certain parent node.** There's not an event for that, so you have to simulate it with the events that you do have access to.

$('.dialogSelector').dialog({
  open: function(e) { // on the open event
    // find the dialog element
    var dialogEl = $(this).parents('.ui-dialog')[0];        
    $(document).click(function (e) { // when anywhere in the doc is clicked
        var clickedOutside = true; // start searching assuming we clicked outside
        $(e.target).parents().andSelf().each(function () { // search parents and self
            // if the original dialog selector is the click's target or a parent of the target
            // we have not clicked outside the box
            if (this == dialogEl) {
                clickedOutside = false; // found
                return false; // stop searching
            }
        });
        if (clickedOutside) {
            $('a.ui-dialog-titlebar-close').click(); // close the dialog
            // unbind this listener, we're done with it
            $(document).unbind('click',arguments.callee); 
        }
    });     
  }
});

**To be more precise you're looking for an event, for when a user clicks outside a particular visible group of elements. An absolutely positioned div may appear to be "outside" of a group of elements to a user while it is actually a child element of one of those elements. This won't quite work for this, but it should work for your purposes.

Hope that helps. :)

Have a look at jquery tools overlay which might help you do modal windows. Its helped me in the past.

To check if a click is outside the modal window you could do something like this:

echo '<div class="mybody">Body of the webpage';
echo '<div class="myoverlay">Body of overlay</div></div>';

jquery:

$(function() {
    $('body').click(function(e) {
        var inOverlay = false;
        $(e.target).parents().each(function(idx,parent) {
            if ('mybody' == parent.className) {
                inOverlay=true;
            }
        });
        if (!inOverlay) {
            alert('outside');
        }
    });
});

Then you can add keyboard checks inside the modal window:

$(".myoverlay").keydown(function(e) {
   // your specific keyboard handler
});

A solution similar to @marcosfromero's (but more performant) is to use $.contains to test whether an element exists within another. $.contains takes advantage of the native document.documentElement.compareDocumentPosition method if it exists, meaning you don't have to turn event.target into a jQuery object, don't need to query the DOM for .ui-dialog, and the underlying logic doesn't even need to traverse the DOM (in modern browsers).

$(document).click(function(event) {
    if( !$.contains( dialog.dialog('widget')[0], event.target ) ){
        $(':ui-dialog').dialog('close');    
    }
});

If the targeted element does not exist with the dialog markup created by the widget (obtained by calling the dialog's widget method), then the dialog is closed.

Demo: http://jsfiddle.net/ehynds/auKAu/

I think this might do it:

$("element").blur(function(){
  /* Callback goes here */
  $("element").hide();
}); 

use the .blur() function... its wonderful :D

http://docs.jquery.com/Events/blur

Create a transparent overlay with CSS {position:fixed;height:100%;width:100%;background:transparent;z-index:100} and use $('.overlay').click(function() {$('ui-dialog').remove();}. Of course, you'll need to create <div class="overlay"></div> at the same time the dialog is created. And the dialog will need a higher z-index!