Click outside div to hide div in pure JavaScript

I want to make a popup that should appear once a button is clicked and disappear once the user clicks outside of the box.

I'm not sure how to make the div disappear when I click outside of it.

var popbox = document.getElementById("popbox");

document.getElementById("linkbox").onclick = function () {
    popbox.style.display = "block";
};

???.onclick = function () {
    popbox.style.display = "none";
};

Answers:

Answer

Here is the second version which has a transparent overlay as asked by the asker in the comments...

window.onload = function(){
	var popup = document.getElementById('popup');
    var overlay = document.getElementById('backgroundOverlay');
    var openButton = document.getElementById('openOverlay');
    document.onclick = function(e){
        if(e.target.id == 'backgroundOverlay'){
            popup.style.display = 'none';
            overlay.style.display = 'none';
        }
        if(e.target === openButton){
         	popup.style.display = 'block';
            overlay.style.display = 'block';
        }
    };
};
#backgroundOverlay{
    background-color:transparent;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    display:block;
}
#popup{
    background-color:#fff;
    border:1px solid #000;
    width:80vw;
    height:80vh;
    position:absolute;
    margin-left:10vw;
    margin-right:10vw;
    margin-top:10vh;
    margin-bottom:10vh;
    z-index:500;
}
<div id="popup">This is some text.<input type="button" id="theButton" value="This is a button"></div>
    <div id="backgroundOverlay"></div>
    <input type="button" id="openOverlay" value="open popup">

Here is the first version...

Here is some code. If there is anything else to add, please let me know :)

The event (e) object gives access to information about the event. e.target gives you the element that triggered the event.

window.onload = function(){
  var divToHide = document.getElementById('divToHide');
  document.onclick = function(e){
    if(e.target.id !== 'divToHide'){
      //element clicked wasn't the div; hide the div
      divToHide.style.display = 'none';
    }
  };
};
<div id="divToHide">Click outside of this div to hide it.</div>

Answer

Here is my Solution.

yourFunc=e=>{
  var popbox = document.getElementById("popbox");
  if(e.target.id !=="popbox"){
    popbox.style.display = "none";
    }else{
    popbox.style.display = "block";
    }
}


document.addEventListener("click",yourFunc)
Answer
el.onmouseleave = function(){
  document.body.onclick = function(){
    el.style.display = 'none';
    document.body.onclick = null;
  }
}
Answer

Okay, here's a jQuery based solution based on any div clicked within the DOM.

$('div').on('click', function(e){
    var parents = $(e.currentTarget).parents();
    for (var i = 0; i < parents.length; i++) {
        if (parents[i].id === 'divToHide' || e.currentTarget.id === 'divToHide') {
            // you are in the popup
        };
    }
    e.stopPropagation();
});

This looks at your current element, as well as any of the parents, and checks if the id matches up. If divToHide is in the parents() list, then you keep the popup open.

*NOTE: This requires wrapping your content within a wrapper div or something similar.

Answer

hope this will work for you

 <script>
// Get the element
var modal = document.getElementById('modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

This code is tested and it's working nicely, thank you.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.