mouse click somewhere else on page (not on a specific div)

Question

I want to close a little pop-up box in page when user has clicked anywhere on the page other than box area. how to find it?

Answer 1

$(document.body).click(function(e){
   var $box = $('#little-pop-up-box-id');
   if(e.target.id !== 'little-pop-up-box-id' && !$.contains($box[0], e.target))
      $box.remove();
});

e.target is the DOM node which received the click event. I'm checking first if the ID of that element is not the one we are looking for.

The second check !$.contains($box[0], e.target) makes sure, that the DOM node of invocation is not within the element we want to hide.

Well, I guess it's plugin time! :

(function($){
   $.fn.outside = function(ename, cb){
      return this.each(function(){
         var $this = $(this),
              self = this;
         $(document.body).bind(ename, function tempo(e){
             if(e.target !== self && !$.contains(self, e.target)){
                cb.apply(self, [e]);
                if(!self.parentNode) $(document.body).unbind(ename, tempo);
             }
         });
      });
   };
}(jQuery));

synopsis

$('#container').outside('click', function(e){
    $(this).remove();
});

Example:

http://www.jsfiddle.net/qbDKN/30/

Answer 2

@jAndy's solution is good, but I wanted to mention Ben Alman's "Outside Events" plugin as well. Here's a quick example using it:

$("#popup").bind("clickoutside", function(event){
  $(this).hide();
});