Today, We want to share with you hide div when click outside using jquery.In this post we will show you jquery hide div on click anywhere, hear for How to hide a div on clicking outsides of it with JavaScript/jQuery? we will give you demo and example for implement.In this post, we will learn about Close div if click outsides with an example.
Hide a DIV When User Clicks Outside of it using jQuery
$(document).mouseup(function (e){
var container = $("#YOUR_TARGETED_ELEMENT_ID");
if (!container.is(e.target) && container.has(e.target).length === 0){
container.fadeOut();
}
});
Example 1: index.html
<!DOCTYPE html>
<html>
<body>
<script>
window.onload = function(){
var hideMe = document.getElementById('hideMe');
document.onclick = function(e){
if(e.target.id !== 'hideMe'){
hideMe.style.display = 'none';
}
};
};
</script>
<div id="hideMe">Click outside this div and hide it.</div>
</body>
</html>
Hide Div On Click Outside Using Jquery
Example 2:
<script>
$(document).mouseup(function(e){
var eti = $("#element_target_id");
if(!eti.is(e.target) && eti.has(e.target).length === 0){
eti.hide();
}
});
</script>
how to hide div on click outside using jquery?
Example 3: if clicked outside of div jquery
$(document).mouseup(function(e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.hide();
}
});
I hope you get an idea about How to use JavaScript to hide a DIV the user clicks outside of it?.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.