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.
I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I’m a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.