jQuery Hide Div on Click Outside
$(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?.
- This blog post was originally published at: https://www.pakainfo.com
1.00 GEEK