Introduction:
Here I will explain how to close jQuery ui modal dialog when click outside of div with example or close jQuery ui modal popup when click outside of div or overlay with example or jQuery ui modal popup dialog with close button example.
Description:
In previous articles I explained jQuery load more records on button click in repeater, jQuery show asp.net exception message in ajax calls, jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to close jQuery ui modal popup dialog when click outside of div or overlay with example.
In previous articles I explained jQuery load more records on button click in repeater, jQuery show asp.net exception message in ajax calls, jQuery check whether radiobutton selected or not, jQuery get radio button selected value by name, jQuery validate radiobuttonlist with example and many articles relating to css, AngularJS, jQuery, JavaScript and asp.net. Now I will explain how to close jQuery ui modal popup dialog when click outside of div or overlay with example.
To close jQuery
ui modal popup dialog when click outside we need to write the code like as
shown below
<script type="text/javascript">
$(function () {
$('#btnclick').click(function () {
$("#popupdiv").dialog({
title: "jQuery Close Modal Popup
when click outside",
width: 430,
height: 250,
modal: true,
buttons: { Close: function () { $(this).dialog('close');
} },
dialogClass: "clickoncloseoutside"
});
});
$("body").on("click", "div.ui-widget-overlay:visible",
function () {
$(".ui-dialog.clickoncloseoutside:visible").find(".ui-dialog-content").dialog("close");
});
});
</script>
|
If
you want to check it in complete example you need to write the code like as
shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery UI Close Modal
Popup Dialog when Click Outside (Overlay)</title>
<link type="text/css"
rel="stylesheet"
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
/>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('#btnclick').click(function () {
$("#popupdiv").dialog({
title: "jQuery Close Modal Popup
when click outside",
width: 430,
height: 250,
modal: true,
buttons: { Close: function () { $(this).dialog('close');
} },
dialogClass: "clickoncloseoutside"
});
});
$("body").on("click", "div.ui-widget-overlay:visible",
function () {
$(".ui-dialog.clickoncloseoutside:visible").find(".ui-dialog-content").dialog("close");
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div id="popupdiv"
title="Basic
modal dialog" style="display: none">
<b> Welcome to
Aspdotnet-Suresh.com</b>
</div>
<table align="center"
style="margin-top:200px">
<tr>
<td>
<input type="button"
id="btnclick"
value="Show
Modal Popup" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
|
Demo
 |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
1 comments :
nice article
Note: Only a member of this blog may post a comment.