How to hide a DIV element when I click outside

Question

I have a div and want to hide it when I click outside. My code is:

<div id="mydiv">The div must be above button</div>

    $('#mydiv').click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#mydiv').fadeOut(300);
    });

But it is not working for me ...

UPDATE

Full code is presented below. When I click on a button it shows a div above, so I need to hide this div when I click outside.

DEMO

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

You should always avoid to bind anything to document when not required — A. Wolff, Dec 15 '12 at 13:08

score 12 · Accepted Answer · edited May 23 '17 at 10:30

12

In javascript click is a bubbling event, it starts on a div and goes up to a document. When you stop an event propagation using a stopPropagation() function, a click on the document is not handled. So, to solve your problem just remove e.stopPropagation().

DEMO 1

The best way is:

$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});

DEMO 2

If I click on this div, how to make to click outside and hide this div ?

Ok, let's imagine, that when you are clicking on a container with id "wrapperId", "myDiv" should be hidden:

$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})

if container is a document, you can use $(document) instead of $("#wrapperId").

DEMO 3

It is not working look what is happening: jsbin.com/ilowij/7

You should stop a click event propagation when you are clicking the button. Make these changes:

$("#but button").click(function(e){
    e.stopPropagation();
    ...
}

DEMO 4

edited May 23 '17 at 10:30

Community

1
1

answered Dec 15 '12 at 13:05

Warlock

7,321
10
55
75

Yes this works, but if I click on this div, how to make to click outside and hide this div ? – andys Dec 15 '12 at 13:31
Yes logicaly it must but it is not working look what is happening: http://jsbin.com/ilowij/7/ – andys Dec 15 '12 at 13:45
Add a 'e.stopPropagation()' function into click handler for $("#but button") – Warlock Dec 15 '12 at 13:56
Is it possible when I click on this DIV dont close ? just if clicking outside would close ? – andys Dec 15 '12 at 14:21
Yes, you should add stopPropagation() for a DIV click event. See this demo: http://jsbin.com/ilowij/10/ – Warlock Dec 15 '12 at 14:26

score 8 · Answer 2 · edited Dec 15 '12 at 13:11

8

Try with below code that checks event target

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});

edited Dec 15 '12 at 13:11

Anujith

9,370
6
33
48

answered Dec 15 '12 at 13:00

prakash2089

498
4
16

hide with click in outside – Anujith Dec 15 '12 at 13:04
1

Not a good idea to bind a click to the document since it's not required. The condition 'if(e.target.id!="mydiv")' looks terribly. – Warlock Dec 15 '12 at 13:33

A. Wolff · Answer 3 · 2012-12-15T13:13:01.913

2

Better than binding click event to document, you can use this kind of snippet:

SEE DEMO

$('#mydiv').click(function(e) {
        e.stopPropagation();
    })
    .css({outline:0})
    .focusout(function(){
         $(this).fadeOut(300);  
    }).focus();

edited Dec 15 '12 at 13:13

answered Dec 15 '12 at 13:06

A. Wolff

74,033
9
94
155

score 1 · Answer 4 · answered Jan 09 '14 at 09:37

1

Why all that just use css3 target

<a href='#login'>Login</a>


<div id='login'>
  blah blah blah
</div>


css:

#login{width:400px;height:600px;background:#fff;margin:10%
       auto;position:absolute;left:0;right:0;
      }

now we will hide the login box by putting a class on it 

<div class='lightbox' id='login'>

</div>

css:

.lightbox{display:none;}
.lightbox:target{display:block;}

thats all the code dont need too use javascript

answered Jan 09 '14 at 09:37

codecare.nl

19
1

I cannot see to make it work. I would be useful to have a stackbliz example – Royer Adames Jul 22 '22 at 15:46
I made the stackbliz and your code doesn't work to hide the panel: https://stackblitz.com/edit/web-platform-4my448?file=styles.css – Royer Adames Jul 22 '22 at 16:08
I notice that this depends on the link to have the anchor. Not what I'm looking for – Royer Adames Jul 22 '22 at 16:15

score 1 · Answer 5 · answered Sep 21 '17 at 11:12

Try the below solution which is easy and it's even working recursive:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

score 0 · Answer 6 · answered Aug 17 '13 at 09:15

check this one

<a href="#" id="link">Click me</a>

show or hide me by clicking

    (function($) {

  $("#link").click(function(e){
    e.stopPropagation();
    var div = $("#show_hide");

    // Make it visible off-page
    div.css({
      "display": "block"
    });

  });
$(document).click(function(e){
  $('#show_hide').fadeOut(300);
});
})(jQuery);

you can checkout this link for example..

check this http://jsfiddle.net/x5Env/

score 0 · Answer 7 · answered Feb 15 '15 at 20:52

The simplest way is to capture the onclick event of the document. You know this click event happens outside the element that you are interested, then just return false. I used this trick to hide a popup menu when a click outside the menu event fires.

Jerin Stephen · Answer 8 · 2016-05-29T21:33:34.410

$('html').click(function() { $("div").css({"display": "none"}); }); $('.option').click(function(event){ event.stopPropagation(); });

$(".search").keyup(function(){ search=$(".search"); if(search.val()!= "" ) { $("div").css({"display": "block"}); } else { $("div").css({"display": "none"}); } });

  <input type="search" class="form-control search" name="search" autocomplete="off" >

  <div>

  </div>

this will help to hide

score -1 · Answer 9 · answered Dec 15 '12 at 13:00

-1

try .blur(), and like this:

$('#mydiv').blur(function(e) {
    $(this).fadeOut(300);
});

Hope it help

answered Dec 15 '12 at 13:00

Michael Antonius

942
2
11
20

It doesn't solve a problem. Originally the problem was related to a wrong using of a stopPropagation() function. – Warlock Dec 15 '12 at 14:13

How to hide a DIV element when I click outside

9 Answers9

Linked