Я создаю всплывающее окно, которое появляется при нажатии ссылки. Я хочу, чтобы фон был затемнен, и я использую прозрачный полноэкранный 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;
}
Вам нужно будет изменить absolute
позиционирование на fixed
позиционирование, например:
position: fixed;
position: fixed
css свойство для исправления div на экране независимо от положения прокрутки.