Click outside div to hide div in pure JavaScript

Question

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

Answer 1

Could be done with onblur event.

// required for focus
divEl.setAttribute('tabindex', '1');
divEl.onblur = event => {
  // hide only if blur occurred outside divEl, ignore its children
  if (!event.currentTarget.contains(event.relatedTarget)) {
    hide();
  }

  // re-focus, if a child took it
  divEl.focus();    
};
divEl.focus();

P.S. For IE11 a small hack event.relatedTarget = event.relatedTarget || document.activeElement; could be required.

Answer 2

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 3

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 4

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 5

el.onmouseleave = function(){
  document.body.onclick = function(){
    el.style.display = 'none';
    document.body.onclick = null;
  }
}

Answer 6

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.