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

Question

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

I'm interested in this question somewhat. I just trigger a click in the document, then check the mouse position to see if it is inside the box. Interested to see other solutions. — Jason, Oct 28 '10 at 05:55
how can you get the actual size of the div? can you share with me? — Bin Chen, Oct 28 '10 at 05:57

score 2 · Accepted Answer · edited May 23 '17 at 12:04

(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

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

score 1 · Answer 2 · answered Oct 28 '10 at 06:05

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/

score 1 · Answer 3 · answered Oct 28 '10 at 06:07

1

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

http://jsbin.com/eqeto3/edit

answered Oct 28 '10 at 06:07

Strelok

50,229
9
102
115

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

3 Answers3

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