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

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()