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: ```

The div must be above button

$('#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 ```

$("#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(); });…

Accepted Answer

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

How to hide a DIV element when I click outside

Solution

Problem

Related problems