Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Close jQuery UI Modal Popup Dialog when Click Outside (Overlay) Example

Aug 20, 2015
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.

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


Close jQuery UI Modal Popup Dialog when Click Outside (Overlay) Example


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 RSS subscribe by email Subscribe by Email

1 comments :

Mohd Azim said...

nice article

Give your Valuable Comments

Other Related Posts

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.