How do you test that a modal jquery dialog has lost focus?

Question

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.

Answer 1

I think this might do it:

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

Answer 2

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

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

Answer 3

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...

Answer 4

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. :)