title: Lightbox position
body: <p>I have a Light Box Code that works great! You click on a button and then there is an overlay of  a black screen and a content box. I am wanting to know if there is a way to make the light box or <code>white_content</code> in the CSS below appear on the screen based on how far down the user has scrolled down the page.</p>
  <p>Basically, I am wanting to have the <code>white_content</code> appear in the middle of the view able screen.</p>
  <p><strong><a href="http://s1309.beta.photobucket.com/user/mievan123/library/Light%20Box" rel="nofollow noreferrer">http://s1309.beta.photobucket.com/user/mievan123/library/Light%20Box</a></strong></p>
  <ul>
  <li><p>The first image is showing the Light Box centered on the page and this is what I want. I am scrolled all the way down the the bottom of the page.</p>
  <p>Also you can see it in action at <a href="http://www.green-panda.com/solutions.html" rel="nofollow noreferrer">http://www.green-panda.com/solutions.html</a></p>
  </li>
  <li><p>The second image is showing the Light Box barely visible on the page. I scrolled up just a little as you can see. The Red Outline is where I want the Light Box to move to when i'm at that position.</p>
  </li>
  </ul>
  <hr />
  <p>Would a screen recording help make this question more clear?</p>
  <p>All of my code is provided below:</p>
  <p><strong>My CSS for the light box</strong></p>
  <pre><code>.black_overlay{
      display: none;
      position: fixed;
      top: 0%;
      left: 0%;
      width: 100%;
      height: 100%;
      background-color: black;
      z-index:1001;
      -moz-opacity: 0.8;
      opacity:.80;
      filter: alpha(opacity=80);
  }
   
  .white_content {
      display: none;
      position: absolute;
      top: 50%;
      left: 25%;
      width: 50%;
      height: 50%;
      padding: 16px;
      border: 16px solid green;
      background-color: white;
      z-index:1002;
      overflow: auto;
  }
  </code></pre>
  <p><strong>The script for opening the lightbox</strong></p>
  <pre><code>&lt;p align=&quot;right&quot;&gt;
      &lt;a href=&quot;javascript:void(0)&quot; 
         class=&quot;button&quot; 
         onclick=&quot;document.getElementById('light').style.display='block';
                  document.getElementById('fade').style.display='block'&quot;
      &gt;Contact Us&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  <p><strong>The actual lightbox coding</strong></p>
  <pre><code>&lt;div id=&quot;light&quot; class=&quot;white_content&quot;&gt;
      This is the lightbox content. 
      &lt;a href=&quot;javascript:void(0)&quot; 
         onclick = &quot;document.getElementById('light').style.display='none';
                    document.getElementById('fade').style.display='none'&quot;
      &gt;Close&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id=&quot;fade&quot; class=&quot;black_overlay&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p><strong><a href="http://jsfiddle.net/Asustaba/474h4/" rel="nofollow noreferrer">JSFiddle</a></strong></p>