16
jQuery Modal Dialog Close on Overlay Click
Tags: 
You may want a modal dialog to close if the overlay is clicked on the page. One way of doing that is to bind a click event to the document and fire it only when the dialog box does not have focus.
This example uses a variable that is flipped back and forth depending on whether or not the dialog box had regained focus. When the dialog box gains focus, the closedialog variable is set to 0 (zero) to prevent the dialog.close method in the overlayclickclose function from being called. The overlayclickclose function is bound to the click event of the document.
The closedialog variable is also set to 1 (one) in the overlayclickclose function so that it will fire when there is a click outside the dialog box.
The dialog box open and close events bind and unbind the click event to the document so that it is only bound when the dialog box is open.
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#mydialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
$('#mydialog').dialog({
bgiframe: true,
autoOpen: true,
modal: true,
width: 500,
resizable: false,
open: function(){closedialog = 1;$(document).bind('click', overlayclickclose);},
focus: function(){closedialog = 0;},
close: function(){$(document).unbind('click');},
buttons: {
Submit: function(){
$(this).dialog('close');
}
}
});
$('#opendialog').click(function() {
$('#mydialog').dialog('open');
closedialog = 0;
});
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="css/redmond/jquery-ui-1.8.2.custom.css">
<script language="javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>
<script language="javascript" type="text/javascript">
$().ready( function () {
var closedialog;
function overlayclickclose() {
if (closedialog) {
$('#mydialog').dialog('close');
}
//set to one because click on dialog box sets to zero
closedialog = 1;
}
$('#mydialog').dialog({
bgiframe: true,
autoOpen: true,
modal: true,
width: 500,
resizable: false,
open: function(){closedialog = 1;$(document).bind('click', overlayclickclose);},
focus: function(){closedialog = 0;},
close: function(){$(document).unbind('click');},
buttons: {
Submit: function(){
$(this).dialog('close');
}
}
});
$('#opendialog').click(function() {
$('#mydialog').dialog('open');
closedialog = 0;
});
});
</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.
Further Reading:
2 Comments for jQuery Modal Dialog Close on Overlay Click
[...] This post was mentioned on Twitter by Jason Dean(12Robots), jen. jen said: New Post: jQuery Modal Dialog Close on Overlay Click on jensbits.com: http://bit.ly/dg0dYz [...]
very nice mate, thanks for this, I was trying to close the modal but no luck, this helped…
Leave a comment
« Using jQuery Autocomplete to Populate Another Autocomplete – ASP.NET, ColdFusion, and PHP Examples | Google Analytics Data Export API with Google Chart Visualizations »
Tweets that mention jQuery Modal Dialog Close on Overlay Click - jensbits.com -- Topsy.com
June 16, 2010