title: jQuery Close DIV By Clicking Anywhere On Page
body: <p>I would like to open <code>email-signup</code> when I click on <code>email-signup-link</code>.  Then I would like to close it by clicking anywhere on the page except for the box itself, of course.</p>
  
  <p>I have looked around on this site and there are various solutions for this problem but every one I've tried shows and then hides my div instantly.  I must be doing something wrong.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;a href="#" id="email-signup-link"&gt;Sign Up&lt;/a&gt;
  &lt;div id="email-signup"&gt;
      &lt;div id="inner"&gt;
          &lt;h2&gt;E-mail Notifications&lt;/h2&gt;
          &lt;input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" /&gt;
          &lt;a href="#"&gt;Sign Up&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is my Javascript:</p>
  
  <pre><code>$('#email-signup').click(function(){
      e.stopPropagation();
  });
  $("#email-signup-link").click(function() {
      e.preventDefault();
      $('#email-signup').show();
  });
  $(document).click(function() {
      $('#email-signup').hide();
  });
  </code></pre>