title: Simple full screen transparent div that allows scrolling
body: <p>I'm making a popup box that appears when a link is clicked. I want the background to be blacked out and am using a transparent full screen div to achieve this. I also want the box to be centered horizontally and vertically regardless of where on the page the user is looking.</p>
  
  <p>When I do this, the black overlay doesn't extend to the bottom of the page. <strong>If you scroll down, the rest of the page is visible as normal. I also cannot get the popup to center properly.</strong></p>
  
  <p><a href="http://jsfiddle.net/d4frG/2/" rel="nofollow">Here's a jsFiddle demonstrating.</a></p>
  
  <p>And here's my code:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="overlay"&gt;
      &lt;!--- Make a really long page for demo ---&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  &lt;/div&gt;
  
  &lt;div id="popup"&gt;Here is some text&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#overlay
  {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 111;
      background-color: #000;
      opacity: 0.5;
      width: 100%;
      height: 100%;
  }
  
  #popup
  {
      left: 30%;
      top: 40%;
      background-color: #FFF;
      z-index: 222;
      width: 300px;
      height: 200px;
      position: absolute;
  }
  </code></pre>