CODEWITHSUNDEEP
javascriptjqueryjquery-uimodal-dialog
Backo
Backo

Reputation: 18871

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

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?

Upvotes: 10

Views: 43501

Answers (4)

Nikunj K.
Nikunj K.

Reputation: 9199

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

Upvotes: 1

Ken
Ken

Reputation: 51

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

Upvotes: 5

Victor
Victor

Reputation: 621

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" );
});

Upvotes: 10

jk.
jk.

Reputation: 14435

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

Upvotes: 5

Related Questions