jQuery-UI close modal dialog on background click

Question

I\'m toying with jQuery UI, and I like how this demo works: http://jqueryui.com/demos/dialog/#modal-message

However, when a dialog comes up, the only way to close it is

Answer 1

That should do the trick:

$(".ui-widget-overlay").click(function(){
    $(".ui-dialog-titlebar-close").trigger('click');
});

Click on .ui-widget-overlay will trigger the click on the close button

Cheers

G.

Answer 2

just to add in case anyone run's into this problem - if you have multiple dialogs stacked on top of each other then the following will close just the dialog that's at the top:

$(".ui-widget-overlay").live("click", function () {
            $(".ui-dialog-titlebar-close", $(this).prev()).trigger('click');
        });

Answer 3

I've found the previous to be finicky at times, here's a simple fix:

$(".ui-widget-overlay").live('click', function(){
   $(".ui-dialog-titlebar-close").trigger('click');
});

Answer 4

This one will definitely work, since it matters when the overlay is in the dom or not.

$(document).on('click', '.ui-widget-overlay', function(){
  $(".ui-dialog-titlebar-close").trigger('click');
});

Answer 5

This is the preferred method to use when dealing with newer versions of Jquery.

$(".ui-widget-overlay").on("click", function(){
    $(".ui-dialog-titlebar-close").trigger('click');
});