Updated thanks to Amir’s comment below. Thank you, Amir.
You may want a modal dialog to close if the overlay is clicked on the page. One way of doing that is to use the jquery live function.
Incidentally, you could use an overlay click event 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.
$(".ui-widget-overlay").click (function () {
$("#dialog-id").dialog( "close" );
});
If you open the dialog with an event like click at any point whether autoOpen is set to true or false, then use jQuery.live.
Fiddle demonstrating successful overlay click event with autoOpen: true and no click event to open dialog: http://jsfiddle.net/GKfZM/2/
Fiddle demonstrating failure of overlay click event with autoOpen: false and click event to open dialog: http://jsfiddle.net/GKfZM/
Fiddle demonstrating how live works with autoOpen: false and with click event: http://jsfiddle.net/GKfZM/1/
$(function () {
$('#mydialog').dialog({
bgiframe: true,
autoOpen: true,
modal: true,
width: 500,
resizable: false,
buttons: {
Submit: function(){
$(this).dialog('close');
}
}
});
$('#opendialog').click(function() {
$('#mydialog').dialog('open');
});
$('.ui-widget-overlay').live('click', function() {
$('#mydialog').dialog( "close" );
});
});
The html for the dialog box includes a couple of radio buttons and a submit button just for demonstration. They do not really do anything in this example. Below is the complete code example.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Close Dialog on Overlay Click</title>
<style type="text/css" media="screen">
body {background-color: #efefef;font-family: "Trebuchet MS",sans-serif;font-size: 16px;}
h1,h2,p {padding: 5px;}
h1,h2{font-size: 18px; color: #666666;}
.container {width: 50%;margin-left: 25%;margin-top:2%;background: #ffffff;border: 4px solid #cccccc;}
#mydialog{font-size:80%}
</style>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$('#mydialog').dialog({
bgiframe: true,
autoOpen: true,
modal: true,
width: 500,
resizable: false,
buttons: {
Submit: function(){
$(this).dialog('close');
}
}
});
$('#opendialog').click(function() {
$('#mydialog').dialog('open');
});
$('.ui-widget-overlay').live('click', function() {
$('#mydialog').dialog( "close" );
});
});
</script>
</head>
<body>
<div class="container">
<h1>Close Dialog on Overlay Click Test page</h1>
<p>Dialog will close if overlay is clicked but not if anything inside of dialog is clicked.</p>
<p><a id="opendialog" href="#">Open dialog</a></p>
<div id="mydialog" title="Overlay Click Close">
<p>Demo of overlay close on click. Submit button will close dialog and nothing else.</p>
<form id="popup_survey" name="popup_survey" method="post">
<p><strong>Pink or blue?</strong><br />
<input id="pink" type="radio" name="radio_color" value="pink" />Pink<br />
<input id="blue" type="radio" name="radio_color" value="blue" />Blue</p>
<p><strong>Soccer or futbol?</strong><br />
<input id="soccer" type="radio" name="radio_sport" value="soccer" />Soccer<br />
<input id="futbol" type="radio" name="radio_sport" value="futbol" />Futbol</p>
</form>
</div>
</div>
</body>
</html>
Recommended:
If this post helped you out, please consider donating to help pay the hosting fees. 100% of the donations go to the web host.
Google+
Twitter
About
13 Comments
Pingback: Tweets that mention jQuery Modal Dialog Close on Overlay Click - jensbits.com -- Topsy.com
very nice mate, thanks for this, I was trying to close the modal but no luck, this helped…
Wow, you're awesome. Thanks for this great bit of code, you'll be getting a back link shortly.
Thanks!!!
Just in case any1 else stumbles across this – this will BREAK! Jquery.live() functions, as it unbinds $(document).click, which is what .live uses.
Changing it to .window worked for me, though I've only tested on chrome for now.
thanks for nice and helpful post.
Ver nice – thanks for this.
I am using tabs within the dialog and by clicking a tab I hab to click twice outside of the dialog in order to close it again (at least in FF 3.6).
The below fixed this:
$("#tabs").tabs({
select: function(){closedialog = 1;}
});
Why? Beats me … thought I share
K – after looking into the code of the datepicker here's my final version using the click target option.
// bind mousedown on entire document
$(document).mousedown(function(e) {
var clicked=$(e.target); // get the element clicked
if(clicked.is('#modalDialog') || clicked.parents().is('#modalDialog')) {
// clicked happend within the dialog
} else {
// outside click
$('#modalDialog').dialog("close"); // let's close it
}
});
In case you're trying to prevent a click on the dialog to trigger a click on the overlay, thereby closing the dialog, here's another technique that doesn't require an extra variable:
$('#dialog').click(function(e) {
// Catch click event on dialog and prevent the event from propagating to the overlay
e.stopPropagation();
});
$('#overlay').click(function() {
// close the dialog and remove overlay
$(this).dialog("close");
});
I think it's just easier to do this:
$('.ui-widget-overlay').live('click', function() {
$(".dialogClass").dialog( "close" );
});
Just make sure all your dialogs have the "dialogClass" class.
@Kevin
Thanks. Changed the code to use window instead.
@Gert
Thanks but couldn’t get that to work. I must be missing something with the #overlay selector.
@Googoo
Thanks for the code but it also closes the dialog when you click on the upper or lower banner on the dialog. Any clicks on the dialog should not close it unless you are clicking on the ‘x’ or the ‘Close’ button.
@Amir
Thanks for the simple code but it didn’t work for me.
amir’s solution worked for me (i changed it to use the id for close instead of class)… thanks for your code.. jen, however your solution didn’t seem to work in IE (even the demo)
@srini, @amir
Thanks. Got it working and updated the post.
Re: the Amir code, if you’re displaying the jQuery UI dialog’s title bar, you could just close the dialog by triggering a click on the visible X:
$(‘.ui-widget-overlay’).live(‘click’, function() {
$(“.ui-dialog-titlebar-close:visible”).click()
});