'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";
};

javascript

Solution 1:^[1]

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>

Solution 2:^[2]

This is code I use to close my side bar when click outside

function openNav() {
    document.getElementById("mySidebar").style.width = "100px";
    document.getElementById("curtain_menu").style.marginLeft = "100px";
}

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("curtain_menu").style.marginLeft = "0";
}

document.onclick = function (e) {
    if (e.target.id !== 'mySidebar' && e.target.id !== 'btn_frontpage_menu') {
        if (e.target.offsetParent && e.target.offsetParent.id !== 'mySidebar')
            closeNav()
    }
}

.sidebar {
  font-family: sans-serif;
  height: 50%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  opacity: 0.9;
}

.sidebar a,
.dropdown-btn {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 1vw !important;
  color: rgb(195, 195, 195);
  display: block;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
  border: none;
}

.dropdown-container a {
  color: rgb(174, 174, 174) !important;
}

.sidebar a:hover,
.dropdown-btn:hover,
.dropdown-container a:hover {
  color: green !important;
  /* background-color: #5c5c5c; */
}

.sidebar .closebtn {
  position: absolute;
  top: 12px;
  font-size: 36px !important;
  margin-right: 5px;
  text-align: right;
  right: 20px;
}

.openbtn {
  font-size: 20px !important;
  cursor: pointer;
  background-color: transparent;
  color: black;
  padding: 6px 15px;
  border: none;
  float: left;
}

#main {
  position :absolute;
  width: 100%;
  height: 100%;
  left: 100px
}

<div id="mySidebar" class="sidebar" style="width: 100px;">
    <a href="javascript:void(0)" class="closebtn"
        onclick="closeNav()">×</a>
    <a href="">Home</a>
    <div class="dropdown-container">
        <a href="">Job Management</a>
        <a href="#">Request</a>
        <a href="#">Pending</a>
    </div>
</div>
<div id="curtain_menu">
    <button id="btn_frontpage_menu" class="openbtn" onclick="openNav()">?</button>
    <div id="datetime"></div>
</div>
<div id="main"> Outside of 'Side Bar' is here
</div>

Solution 3:^[3]

Here, the idea is to detect click events on the page and set the container’s display to none only when the target of the click isn’t one of the div descendants.

HTML

<div id="container">
    <label>Enter your name:</label>
    <input type="text">
    <button id="submit">Submit</button>
</div>

document.addEventListener('mouseup', function(e) {
    var container = document.getElementById('container');
    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
});

Solution 4:^[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)

Solution 5:^[5]

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.

Solution 6:^[6]

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.

Solution 7:^[7]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Wolf
Solution 3	Lyn Robert
Solution 4	Mohit Singh Negi
Solution 5
Solution 6
Solution 7	Community

'Click outside div to hide div in pure JavaScript

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]