центр div в середине экрана-даже при прокрутке страницы вверх / вниз
У меня на странице есть кнопка, которая при нажатии отображает div (всплывающий стиль) в середине моего экрана.
Я использую следующий CSS для центрирования div в середине экрана.
.PopupPanel
{
border: solid 1px black;
position: absolute;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}
он отлично работает, пока страница не прокручивается вниз..
но если я помещаю кнопку в нижней части моей страницы и нажимаю на нее, div отображается вверху (пользователь должен прокрутить вверх, чтобы просмотреть содержимое div).
Я хотел бы знать как отобразить div в центре экрана, является ли пользователь прокручивается вверх/вниз.
5 ответов
цитата: Я хотел бы знать, как отобразить div в середине экране, если пользователь прокручивается вверх/вниз.
изменить
position: absolute;
до
position: fixed;
спецификации W3C для position: absolute
и position: fixed
.
Я только что нашел новый трюк, чтобы центрировать коробку в середине экрана, даже если у вас нет фиксированных размеров. Допустим, вам нужна коробка 60% ширины / 60% высоты. Способ сделать его центрированным-создать 2 поля: поле "контейнер", которое находится слева: 50% сверху :50%, и поле" текст " внутри с обратной позицией слева: -50%; сверху :-50%;
он работает, и он совместим с кросс-браузером.
проверьте код ниже, вы, вероятно, получите лучше объяснение:
<div id="message">
<div class="container"><div class="text">
<h2>Warning</h2>
<p>The message</p>
<p class="close"><a href="#">Close Window</a></p>
</div></div>
<div class="bg"></div>
</div>
<style type="text/css">
html, body{ min-height: 100%; }
#message{ height: 100%; left: 0; position: fixed; top: 0; width: 100%; }
#message .container{ height: 60%; left: 50%; position: absolute; top: 50%; z-index: 10; width: 60%; }
#message .container .text{ background: #fff; height: 100%; left: -50%; position: absolute; top: -50%; width: 100%; }
#message .bg{ background: rgba(0,0,0,0.5); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 9; }
</style>
<script type="text/javascript">
jQuery('.close a, .bg', '#message').on('click', function(){
jQuery('#message').fadeOut();
return false;
});
</script>
Ура!
правильный способ-это
.PopupPanel
{
border: solid 1px black;
position: fixed;
left: 50%;
top: 50%;
background-color: white;
z-index: 100;
height: 400px;
margin-top: -200px;
width: 600px;
margin-left: -300px;
}