How do I make this popup box disappear when I click outside?

Question

http://jsfiddle.net/mnbayazit/by3zy/2/

I want the popup to disappear when I click somewhere on the background. Problem is, it disappears when I click an [X] or the popup itself.

Imagine it being a calendar-picker if that makes my intentions more clear.

How can I get it to do that?

Answer 1

1. Set a click handler for the body to remove your popup.

2. Set a click handler for the popup itself that calls stopPropagation() on the event, to prevent it from bubbling up to the body.

Roughly:

function showMyPopup(){
  ...
  $(myPopupDiv).click(function(e){
    e.stopPropagation();
  });
}
function closeMyPopup(){
  ...
}
$(document.body).click(closeMyPopup);

Answer 2

The basic jist with this technique is to have a wrapping (or independent element layered with z-index) that 'captures' the click event, and hides the elements you desire. I've updated your fiddle with an example of how this would work, except imagine that the blanket element would have a height and width of 100% (to cover the entire viewport).