jQuery: hide() box when clicking on body but not() on element itself?
<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>
