3

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

3
  • 1
    Try position: fixed for .white_content too Feb 12, 2013 at 0:40
  • How can I open the Lightbox in the Live demo? Feb 12, 2013 at 5:06
  • If you go to http:www.green-panda.com/solutions.html and then click on the button that say contact us near the bottom right of the page. You will see the light box. Feb 12, 2013 at 5:47

2 Answers 2

5

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

1
  • I edited my question as your answer did not resolve what I am wanting. But that's ok! Feb 12, 2013 at 4:36
0

I have created a demo for you here. I am sure that will help you to achieve that you want.

Following is the code that I am using in the demo:

    /* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
4
  • Isn't that what I already said? Quote: Use top: 50%; left: 50%; and a static, negative top and left margin, which is half of the width and height of your element. Feb 12, 2013 at 1:41
  • I thought that was too complicated, I have just added the exact properties that he needs to make it to the center of the view...you are using position as absolute.
    – KKS
    Feb 12, 2013 at 1:46
  • I edited my question as your answer did not resolve what I am wanting. But that's ok! Feb 12, 2013 at 4:35
  • @MitchEvans Hey I have a demo to make anything center on the view using css in the updated answer. plz go through that, it should help you.
    – KKS
    Feb 12, 2013 at 9:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.