title: Modal closing when pop up is clicked
body: <p>I'm making a simple jQuery pop up modal. I know I should just use a plugin but I want to at least understand the mechanics of how it works before using a plugin so im creating my own.</p>
  
  <p>here is the html:</p>
  
  <pre><code>&lt;div id="box"&gt;
  &lt;div id="modal"&gt;
  &lt;a href="#" class="close"&gt;&lt;div&gt;close&lt;/div&gt;&lt;/a&gt;
      &lt;div class="wrapper"&gt;
          &lt;h1 style="text-align:center"&gt;Title Here&lt;/h1&gt;
          &lt;p style="text-align:center"&gt;Do what ever you want here crete a form add an image gallery etc.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  
  
  
  &lt;div id="wrapper"&gt;
      &lt;h1&gt;This is a Very Simple/Lightweight jQuery Modal Pop Up!&lt;/h1&gt;
      &lt;a href="#" class="reveal"&gt;Click Me!&lt;/a&gt;
  &lt;/div&gt;&lt;!-- END WRAPPER --&gt;
  </code></pre>
  
  <p>the css:</p>
  
  <pre><code>#modal{
  background-color: #fff;
  width: 500px;
  height: 300px;
  z-index: 50;
  position:absolute;
  border-radius: 8px;
  }
  </code></pre>
  
  <p>and now the jQuery:</p>
  
  <pre><code>$(document).ready(function(){
  // hide the modal on page load
  $('#box').hide();
  
  //show modal when the link is clicked
  $('.reveal').click(function(e){
      e.preventDefault();
  
      pageWidth  = $(window).width();
      pageHeight = $(document).height();
      modalLeft = Math.max(pageWidth - $('#modal').outerWidth(),  0) / 2;
      modalTop  = Math.max($(window).height() - $('#modal').outerHeight(),  0) /   2;
  
      $('#box').fadeIn("slow").css({
          "background-color": "rgba(0,0,0,0.8)",
          "width"           : pageWidth,
          "height"          : pageHeight,
          "z-index"         : "10",
          'position'        :'absolute',
          'top'             :'0',
          'left'            :'0'
      });
      $('#modal').fadeIn("slow").css({
          'top'             : modalTop + $(window).scrollTop(), 
          'left'            : modalLeft + $(window).scrollLeft()
      });
  });
  
  // close modal
  $('.close').click(function(){
      $('#box').fadeOut("slow");
  });
  $('#box').click(function(){
      $(this).fadeOut("slow");
  });
  
  
  });
  </code></pre>
  
  <p>here is a jsfiddle so it can be seen in action:
  <a href="http://jsfiddle.net/dNj4b/" rel="nofollow">http://jsfiddle.net/dNj4b/</a></p>
  
  <p>The problem that I am having is that I want the pop up to close only when the overlay is clicked;howver, it closes even when just the pop up box is clicked</p>