title: Javascript onclick close div
body: <p>I have a div that whenever the user clicks it, a form for a newsletter pops out, at the moment the code is set that an overflow fills the rest of the webpage an that is where the user has to click in order for the form to close, however i want the form to only close when the user clicks anywhere inside the form (except the sign up/email input section) and not outside.   </p>
  
  <p><a href="http://jsfiddle.net/KarinaMcG/FpEZg/" rel="nofollow">http://jsfiddle.net/KarinaMcG/FpEZg/</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="newsletter"&gt;
  &lt;div id="newslettertext1"&gt;
      Newsletter bestellen&lt;br&gt;
      &lt;br&gt;
      Lassen Sie sich per Newsletter &amp;#252;ber Neuheiten und &lt;br&gt;
      Aktionen von Tempur informieren. Jetzt anmelden
  &lt;/div&gt;
  &lt;div id="signup"&gt;
      &lt;form id="leftnewsletter" action="" method="get"&gt;
      &lt;input type="email" name="email" id="emailsignup" placeholder="E-MAIL ADDRESS" style="margin-left:76px; margin-top:16px; width:187px;"&gt;
      &lt;input type="submit" name="signupbtn" id="signupbtn" value="SIGN UP" class="signupbutton"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  &lt;div id="newslettertext2"&gt;
      *Sie k&amp;#246;nnen jederzeit Ihre Einwilligung zum Erhalt des&lt;br&gt;
  </code></pre>
  
  <p>Newsletters zur&#252;ckziehen und sich abmelden.
      </p>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>body
  {
  font-family: Arial;
  }
  
  .newsletter
  {
  background-color:#f94798;
  position: fixed;
  top: 200px;
  left: -390px;
  width: 450px;
  height: 200px;
  z-index: 9999;
  cursor: pointer;
  }
  
  #newslettertext1
  {
  font-size: 11px;
  padding-top:40px;
  padding-left:75px;
  font-weight: bold;
  color:#164e82;
  }
  
  #newslettertext2
  {
  font-size:10px;
  color:#eaeaea;
  margin-left:76px;
  margin-top:7px;
  }
  
  #overflow {
  background-color: #fdf291;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  }
  
  .text {
  display: block;
  width: 180px;
  margin: 80px 0 0 196px;
  font-family: Arial;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 3px;
  color: #ffffff;
  cursor: pointer;
  transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  }
  
  .signupbutton
  {
  background-color: #164e82;
  color:#ffffff;
  border-radius: 5px;
      cursor: pointer;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function() {
  
  $('.newsletter').click(function() {
  
    var overflow = ('&lt;div id="overflow"&gt;&lt;div&gt;');
  
    $(this).stop().animate({ left: '-35' }, 650);
  
    if($('#overflow').length &lt; 1) {
      $('body').append(overflow);
    }
  
    var wWth = $(window).innerWidth(),
        wHgt = $(window).innerHeight();
  
    $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt });
  
    $('#overflow').click(function() {
  
      $(this).fadeOut('slow') 
      $('.newsletter').stop().animate({ left: '-390px' }, 650);
  
    });
  
  });
  
  $(window).resize(function() {
  
    var wWth = $(window).innerWidth(),
        wHgt = $(window).innerHeight();
  
    $('#overflow').fadeIn('slow').css({ width: wWth, height: wHgt });
  
  });
  </code></pre>
  
  <p>});</p>