Позиция для лайтбокса

Question

У меня есть Коробка с коротким светом, которая отлично работает! Вы нажимаете на кнопку, а затем накладываете черный экран и поле содержимого. Я хочу знать, есть ли способ сделать световой блок или white_content в CSS ниже на экране, в зависимости от того, как далеко вниз пользователь прокрутил страницу вниз.

В принципе, я хочу, чтобы white_content отображались в середине экрана с возможностью просмотра.

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

• Первое изображение показывает Свет Box в центре страницы, и это то, что я хочу. Я прокручиваю весь путь вниз в нижней части страницы.

  Также вы можете увидеть его в действии на http://www.green-panda.com/solutions.html

• Второе изображение показывает Свет Box едва видна на странице. Я немного прокручивался, как вы можете видеть. Красный контур - это то место, где я хочу, чтобы Light Box двигался, когда я нахожусь в этом положении.

---

ли запись экрана поможет сделать этот вопрос более понятно?

Весь мой код приведен ниже:

Мой CSS для световом коробе

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

Скрипт для открытия осветителя

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

Фактический лайтбокс кодирование

<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

Вы не можете центрировать его с шириной и высотой будучи проценты (по крайней мере, не без использования JS).

Вы могут однако установить статическую высоту и ширину и в центре его так:

Использование top: 50%; left: 50%; и статические, отрицательные верхние и левые поля, которая составляет половину ширины и высоты вашего элемента.

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

JSFiddle

Answer 2

Я создал demo for you here. Я уверен, что это поможет вам достичь того, чего вы хотите.

Ниже приведен код, который я использую в демо:

/* 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; 
}