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.
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 Email
|
|||
0 comments :
Note: Only a member of this blog may post a comment.