Lightbox position

Question

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 white_content in the CSS below appear on the screen based on how far down the user has scrolled down the page.

Basically, I am wanting to have the white_content appear in the middle of the view able screen.

http://s1309.beta.photobucket.com/user/mievan123/library/Light%20Box

• 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.

  Also you can see it in action at http://www.green-panda.com/solutions.html

• 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.

---

Would a screen recording help make this question more clear?

All of my code is provided below:

My CSS for the light box

.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;
}

The script for opening the lightbox

<p align="right">
    <a href="javascript:void(0)" 
       class="button" 
       onclick="document.getElementById('light').style.display='block';
                document.getElementById('fade').style.display='block'"
    >Contact Us</a>
</p>

The actual lightbox coding

<div id="light" class="white_content">
    This is the lightbox content. 
    <a href="javascript:void(0)" 
       onclick = "document.getElementById('light').style.display='none';
                  document.getElementById('fade').style.display='none'"
    >Close</a>
</div>
<div id="fade" class="black_overlay"></div>

JSFiddle

Answer 1

You can't center it with the width and height being percentages (at least not without using JS).

You can however set a static height and width and center it like this:

Use top: 50%; left: 50%; and static, negative top and left margins, which should be half of the width/height of your element.

.white_content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -182px 0 0 -182px;
    width: 300px;
    height: 300px;
    padding: 16px;
    border: 16px solid green;
    background-color: white;
    z-index: 1002;
    overflow: auto;
}

JSFiddle