Простой полноэкранный прозрачный div, позволяющий прокручивать

0

Я создаю всплывающее окно, которое появляется при нажатии ссылки. Я хочу, чтобы фон был затемнен, и я использую прозрачный полноэкранный div для достижения этого. Я также хочу, чтобы ящик был центрирован по горизонтали и вертикали независимо от того, на какой странице находится пользователь.

Когда я это сделаю, черная накладка не распространяется на нижнюю часть страницы. Если вы прокрутите вниз, остальная часть страницы будет видна как обычно. Я также не могу получить всплывающее окно в центре.

Здесь демонстрируется jsFiddle.

И вот мой код:

HTML:

<div id="overlay">
    <!--- Make a really long page for demo --->
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
</div>

<div id="popup">Here is some text</div>

CSS:

#overlay
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 111;
    background-color: #000;
    opacity: 0.5;
    width: 100%;
    height: 100%;
}

#popup
{
    left: 30%;
    top: 40%;
    background-color: #FFF;
    z-index: 222;
    width: 300px;
    height: 200px;
    position: absolute;
}
  • 2
    Используйте position: fixed css свойство для исправления div на экране независимо от положения прокрутки.

1 ответ

1

Вам нужно будет изменить absolute позиционирование на fixed позиционирование, например:

position: fixed;

DEMO

Ещё вопросы

Сообщество Overcoder
Наверх
Меню