Jquery: how to capture the click event that is NOT in the region of <div>?

Question

Hi,

I am using the to implement a popup window using zIndex... things work well but I want to implement a function, that is when user click any region that is outside of the popup div, the div will be closed, how to do that?

Bin

Answer 1

(function($){
   $.fn.outside = function(ename, cb){
      return this.each(function(){
         var $this = $(this),
              self = this;

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

That is a copy&paste code from

http://stackoverflow.com/questions/3440022/mouse-click-somewhere-else-on-page-not-on-a-specific-div/3440036#3440036

Answer 2

An easy way to do this is to cover your page with a transparent (could also be completely transparent) mask using a div.

Attach a click handler on this mask div to close out the popup.

See example here: http://www.sohtanaka.com/web-design/examples/modal-window/

Answer 3

Here is an example, using the Event.target (cross browser).

http://jsbin.com/eqeto3/edit