Close div with click outside (parent)

Question

This is not a new problem on stackoverflow, but I've tried everything without success.

I have a "popup" created with two divs. The parent ist the background and the child is the popup content. I want to hide the popup when the user clicks on the background (the parent).

It sounds extremly easy also for me but I can't achieve that. This is my code and what I tried (it works exacly at the opposite way as I want):

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
 popup.style.display = 'block';
 content.onclick = e => {
   if(e.target !== this) {
     popup.style.display = 'none';
    }
  }
}

.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}

<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>

Can somebody help me?

You're adding a click event only to your popup content, you need to add a click event to the container div — Ryan Wilson, Aug 15 '18 at 15:56
bind the hide event to the background click and stop propagation in the child click — Pete, Aug 15 '18 at 16:04
Try my best solution for this problem. https://stackoverflow.com/questions/33060993/click-outside-div-to-hide-div-in-pure-javascript/75603215#75603215 — pankaj, Mar 01 '23 at 11:41

score 2 · Accepted Answer · answered Aug 15 '18 at 15:58

You should separate both events and attach the click to the window so you can detect the clicks outside of popup-content like :

let content = document.querySelector('.popup-content');
let popup = document.querySelector('.popup');
let button = document.querySelector('button');

button.onclick = () => {
  popup.style.display = 'block';
}

window.onclick = e => {
  if (e.target === popup) {
    popup.style.display = 'none';
  }
}

.popup {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  display: none;
}

.popup-content {
  background-color: #fff;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 25%;
  min-width: 470px;
  border-radius: 4px;
}

<button>
Open Popup
</button>
<div class="popup">
  <div class="popup-content">
    <h3>Popup Title</h3>
    <p>Popup Text</p>
  </div>
</div>

It was so easy! Thank you very much. – Danny_DD Aug 15 '18 at 18:18 — Danny_DD, Aug 15 '18 at 18:18
You're very welcome, glad I could help. – Zakaria Acharki Aug 15 '18 at 18:23 — Zakaria Acharki, Aug 15 '18 at 18:23

Khalid Ahmada · Answer 2 · 2018-08-15T16:12:55.607

you can try something like this :

instead of adding the EventListner to close the div on the button you need to add it on the document instead. and test on target if is not your button just like this :

    let popup = document.querySelector('.popup');
    let button = document.querySelector('button');



    // Event that hide the popin if the click happen out popin
    function closeHandler(e) {
        if (e.target !== popup) {
            // We remove the event for better perfermance
            removeCloseListner();
            // We hide the popin
            popup.style.display = 'none';
        }
    }

    // Call this function when you open your popin popin
    function addCloseLitnerToDocument() {
        document.addEventListener("click", closeHandler);
    }

    function removeCloseListner() {
        document.removeEventListener("click", closeHandler)
    }

    // Add listner to Open Popin
    button.onclick = (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    // when popin is open
                    // Add listner to the document
                    // And show the popin
                    popup.style.display = 'block';
                    addCloseLitnerToDocument();
                }

Close div with click outside (parent)

2 Answers2

Linked