How to close a jQuery UI modal dialog by clicking outside the area covered by the box?

Question

I am using jQuery 1.6 and jQuery UI. I successfully implemented a modal dialog window which width is almost 50% of my application web page' width. I would like to give to the user another way to close the dialog so that when he\she clicks outside the area covered on the page by the "modal box", this one will be closed as if the user clicked on the "standard" "x" button on the top-right of that.

How can I do that?

Answer 1

Update

This was the initial answer:

$(".ui-widget-overlay").click (function () {
     $("#your-dialog-id").dialog( "close" );
});

This is the working solution:

$('.ui-widget-overlay').live('click', function() {
     $('#your-dialog-id').dialog( "close" );
});

Answer 2

How about this way，this way you can close the dialog whatever it open from where and which id. It's a global function:

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

Answer 3

To clarify, the answer by Victor only works if the dialog is set to autoOpen: true, the default value of the dialog, and you do not open the dialog again with an event. If you open the dialog with an event like click at any point whether autoOpen is set to true or false, then you have to use jQuery.live.

Fiddle demonstrating failure of overlay click event with autoOpen: false: http://jsfiddle.net/GKfZM/

Fiddle demonstrating how live works with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/1/

Summary: Victor's answer only works under certain conditions.

Tutorial link

Answer 4

You have two options for the close model dialog box

$('#your-dialog-id').modal('toggle');

OR

you can use the click event directly when you click outside box

$("#your-dialog-id .close").click()