Question

My problem: For example: I have a link, when I click on it a popup div is shown, and when I click on the link again then closes the popup, that’s ok, but how can I do to close the opened popup box when I click anywhere else outside of the popup.

I’ve searched a lot and I found some solutions, but those weren’t enough good to me, as I know there is a way to hide the box by offset X, and offset Y, as I understood works in this way, the javascript tracks the position of the popup and if the users clicks on an other position it closes or what..

Please could someone tell me how can I do it this way? It’s really important for me!!

Please if you don’t understand something, or do you have any questions write here and I will try to explain it better!

Answer 1

Csirkepöcsű? 🙂

You need an onclick handler for the document, or the body.

​See it in action.

// make sure that click on the popup does nothing
document.getElementById("pop").onclick = function(e) {
  // in all browsers
  if(e && e.stopPropagation) {
    e.stopPropagation();
  } else {
    e = window.event;
    e.cancelBubble = true;
  }
};

// click anywhere else
document.documentElement.onclick = function() {
  // will hide the popup
  document.getElementById("pop").style.display = "none";
};