title: How to hide a DIV element when I click outside
body: <p>I have a <code>div</code> and want to hide it when I click outside. My code is:</p>
  
  <pre><code>&lt;div id="mydiv"&gt;The div must be above button&lt;/div&gt;
  
      $('#mydiv').click(function(e) {
          e.stopPropagation();
      });
  
      $(document).click(function() {
          $('#mydiv').fadeOut(300);
      });
  </code></pre>
  
  <p>But it is not working for me ...</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Full code is presented below. When I click on a button it shows a <code>div</code> above, so I need to hide this <code>div</code> when I click outside.</p>
  
  <p><a href="http://jsbin.com/ilowij/7/">DEMO</a></p>
  
  <pre><code>&lt;div id="but" style="text-align: right;"&gt;&lt;button type="button"&gt;Show Div!&lt;/button&gt;&lt;/div&gt;
  &lt;div id="mydiv" style="display:none;"&gt;The div must be above button&lt;/div&gt;
  
  $("#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);
  });
  </code></pre>