Close a div by clicking outside

Question

I want to hide a div by clicking on the close link in it  or by clicking anywhere outside that div   I am trying following code  it opens and close the div by clicking close link properly  but if I have problem to close it by clicking anywhere outside the div    x000D   x000D      link   click function     x000D        popup   fadeIn 300   x000D    x000D   x000D     x000D      close   click function     x000D        popup   fadeOut 300   x000D    x000D   x000D     x000D     body   click function     x000D    if     this target  is   popup      x000D          popup   hide    x000D      x000D    x000D   x000D     x000D   lt div class  box  gt  x000D     lt a href     class  link  gt Open lt  a gt  x000D     lt div class  popup  gt  x000D      Hello world x000D       lt a class  close  href     gt Close lt  a gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Demo  http   jsfiddle net LxauG

User · Answer

This question might have been answered here. There might be some potential issues when event propagation is interrupted, as explained by Philip Walton in this post.

A better approach/solution would be to create a custom jQuery event, e.g. clickoutside. Ben Alman has a great post (here) that explains how to implement one (and also explains how special events work), and he's got a nice implementation of it (here).

More reading on jQuery events API and jQuery special events:

User · Answer

I d suggest using the stopPropagation   method as shown in the modified fiddle   Fiddle     body   click function             popup   hide             popup   click function e        e stopPropagation          That way you can hide the popup when you click on the body  without having to add an extra if  and when you click on the popup  the event doesn t bubble up to the body by going through the popup

User · Answer

Add a transparent background taking up the whole window size  just before your popup div   transparent-back      position  fixed      top  0px      left 0px      width  100       height  100       background-color  rgba 255 255 255 0 5       Then on its click  dismiss the popup       transparent-back   on  click  function           popup   fadeOut 300

User · Answer

An other way which makes then your jsfiddle less buggy  needed double click on open    This doesn t use any delegated event to body level  Set tabindex  -1  to DIV  popup   and for style CSS outline 0    DEMO      link   click function e       e preventDefault            popup   fadeIn 300 function     this  focus                close   click function            popup   fadeOut 300           popup   on  blur  function          this  fadeOut 300

User · Answer

You need     body   click function e        if     e target  closest   popup   length               popup   hide

User · Answer

You d better go with something like this  Just give an id to the div which you want to hide and make a function like this  call this function by adding onclick event on body   function myFunction event      if event target id   target id          document getElementById  target id   style display  none

User · Answer

for closeing the popover when user click outside it will close all popover   var hidePopover   function element            var elementScope   angular element   element  siblings   popover    scope    parent          elementScope isOpen   false          elementScope  apply              Remove the popover element from the DOM           element  siblings   popover   remove              document  ready function        body   on  click   function  e              a   each function                            Only do this for all popovers other than the current one that cause this event            if      this  is e target       this  has e target  length  gt  0                    amp  amp    this  siblings   popover   length     0  amp  amp    this  siblings   popover   has e target  length     0                                                                   hidePopover this

[javascript] Close a div by clicking outside

Examples related to javascript

Examples related to jquery

Examples related to html