Question

97

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

rated 0 times [ 103] [ 6] / answers: 1 / hits: 43552 / 13 Years ago, fri, september 9, 2011, 12:00:00

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 heshe 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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ednakarolinal

Add To Favorites

Follow

Total Points: 187

Total Questions: 106

Total Answers: 118

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 13 Years ago sidneyh · Accepted Answer

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