Clever Geek Handbook

Lightbox

I have Light Box code that works great! You click on a button and then overlay a black screen and content box. I want to know if there is a way to make the light block or white_content

in the CSS below the screen based on how far down the user has scrolled down the page.

Basically, I want to white_content

be displayed in the middle of the screen with a viewable.

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

  • The first image shows the Light Box centered on the page, which is what I want. I scroll all the way to the bottom of the page.

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

  • The second image shows the Light Box barely visible on the page. I've been scrolling a bit, as you can see. The red outline is where I want the Light Box to move when I am in this position.

Did this screen recording help clarify this question?

All my code is below:

My CSS for a light window

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

script to open 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>

Actual coding of the lightbox

<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


source to share


2 answers


You cannot center it with width and height as a percentage (at least without using JS).

However, you can set static height and width and center them like so:

Use top: 50%; left: 50%;

top: 50%; left: 50%;

both static, negative top and left margins, which should be half 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

+5


source


I created a demo for you here . I am sure this will help you achieve what you want.

Below is the code 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;
}
0


source






More articles:


All Articles