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);
});

Answer 1

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