In this article I will explain with an example, how to close (hide) jQuery UI Dialog Modal Popup box when outside (Overlay Background) is clicked.
When the user clicks outside the jQuery UI Dialog Modal Popup box i.e. on the Overlay Background, the jQuery UI Dialog Modal Popup box is closed (hidden) using the jQuery Dialog “close” command.
Close jQuery UI Dialog Modal Popup when outside (Overlay Background) is clicked
The following HTML Markup consists of jQuery UI Script and CSS files inherited to use jQuery UI Dialog Modal Popup box, an HTML DIV and a Button.
The Button has been assigned a jQuery Click event handler and when the Button is clicked the jQuery UI Dialog Modal Popup box is shown using the jQuery Dialog “open” command.
The jQuery UI Dialog Modal Popup box has been assigned open event handler and inside this event handler, a click event handler is attached to the Overlay Background HTML DIV by selecting it using its Css Class.
Now whenever the Overlay Background HTML DIV is clicked, the jQuery UI Dialog Modal Popup box is closed using the jQuery Dialog “close” command.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 300,
height: 150,
open: function (event, ui) {
$(".ui-widget-overlay").click(function () {
$('#dialog').dialog('close');
});
}
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
</script>
<input type="button" id="btnShow" value="Show Popup" />
<div id="dialog" style="display: none" align="center">
This is a jQuery Dialog.
</div>
Screenshot
![Close jQuery UI Dialog Modal Popup when outside (Overlay Background) is clicked]()
Browser Compatibility
The above code has been tested in the following browsers.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
