Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Click outside div to hide div in pure JavaScript

Tags:

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";
};
like image 252
Henrique Braun Avatar asked Oct 11 '15 02:10

Henrique Braun


People also ask

How do I hide a div when clicked outside?

To hide an element when clicked outside: Add a click event listener to the document object. On each click, check if the clicked element is outside of the specific element using the contains() method. If the clicked element is outside, hide the original element.

How do you trigger an event when clicking outside the Element?

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

How do I hide a specific div?

To hide an element, set the style display property to “none”. document.

How do I show and hide a div on click?

To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.


2 Answers

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>
like image 158
www139 Avatar answered Sep 28 '22 03:09

www139


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>
like image 41
Wolf Avatar answered Sep 28 '22 03:09

Wolf