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.
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 Email
|
|||
5 comments :
Awesomeeee ....
very good..........
lovelly Explaination
Thank you so much...
Very Good.. Excellent
nice
Note: Only a member of this blog may post a comment.