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

Use jQuery to Hide a DIV when Clicks Outside of it in JavaScript

Mar 28, 2013
Introduction

Here I will explain how to use
jQuery to close or hide div when user clicks outside of it or Hide/Close div when clicked outside of it using jQuery or how to close open div when click outside of it using jQuery.

Description:
  
In previous posts I explained jQuery Check internet connection using JavaScript, jQuery Custom Right click Context Menu, jQuery UI Virtual keyboard example, jQuery Show hidden content on mouse over on top of element and many articles relating to
jQuery. Now I will explain how to close open div when click outside of it using jQuery.

If you want to close open div when click outside of it we need to write the code like as shown below

$(document).mouseup(function(e) {
var closediv = $("#custom-menu");
if (closediv.has(e.target).length == 0) {
closediv.hide();
}
});
If you want to see it in complete example check below code


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
try {
$(document).bind("contextmenu", function(e) {
e.preventDefault();
$("#custom-menu").css({ top: e.pageY + "px", left: e.pageX + "px" }).show(100);
});
$(document).mouseup(function(e) {
var closediv = $("#custom-menu");
if (closediv.has(e.target).length == 0) {
closediv.hide();
}
});
}
catch (err) {
alert(err);
}
});
</script>
<style type="text/css">
#custom-menu
{
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
}
#custom-menu ol
{
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
font-family:Verdana;
font-size:12px;
}
#custom-menu ol li
{
margin: 0;
display: block;
list-style: none;
padding: 5px 5px;
}
#custom-menu ol li:hover
{
background-color: #efefef;
}

#custom-menu ol li:active
{
color: White;
background-color: #000;
}

#custom-menu ol .list-devider
{
padding: 0px;
margin: 0px;
}

#custom-menu ol .list-devider hr
{
margin: 2px 0px;
}

#custom-menu ol li a
{
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
}
#custom-menu ol li a:active
{
color: White;
}
</style>
</head>
<body>

<div id="custom-menu">
<ol>
<li><a href="#">Reply</a> </li>
<li><a href="#">Reply All</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Mark as unread</a> </li>
<li><a href="#">Delete</a> </li>
<li><a href="#">Archive</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Junk</a> </li>
<li><a href="#">View</a> </li>
</ol>
</div>
</body>
</html>
Live Demo

To check for live demo try to right click on this webpage

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

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.