title: jQuery: hide() box when clicking on body but not() on element itself?
body: <p>I have a <code>&lt;a href="#" id="btn"&gt;Show Box&lt;/a&gt;</code> somwhere in my DOM. Additionally I have a <code>div#overlay</code> that is by default set to <code>display:none;</code>.</p>
  
  <pre><code>// Toggle Overlay
  $('#btn').click(function(e) {
      e.preventDefault();
      $('#overlay').toggle();
  })
  
  $('body').not('#btn, #overlay').click(function() {
      if ( $('#overlay').is(':visible') ) $('#overlay').hide();
  });
  </code></pre>
  
  <p>Why is this not working? I want the <code>#btn</code> to toggle() the overlay when clicking it. However when the overlay is visible and I click anywhere on the document (except the <code>#btn</code> itself or the <code>#overlay</code>) I want the overlay also to be hidden.</p>