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

jQuery Hide Div if Clicked Outside or Anywhere Else Example

Nov 19, 2015
Introduction

Here I will explain how to use
jQuery to hide div when user clicks outside of it example or Hide/Close div when clicked outside of it using jQuery or hide element if click anywhere else using jQuery with example.

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 or hide div when click outside of it (anywhere else) using jQuery.

If you want to close or hide div when click outside of it in jQuery 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 write code like as shown below


<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 to hide div if clicked outside using jQuery 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

0 comments :

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 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.