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

Answer 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>

Answer 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>