Позиционируйте оверлей в центре страницы с помощью jquery
Это должен быть простой вопрос, но я не могу понять его. Я сделал всплывающее окно с использованием jquery, и я хочу, чтобы он располагался в центре страницы. Независимо от того, как сайт настроен и разрешение. Сейчас я просто позиционирую его абсолютно с помощью CSS, но проблема в том, что если вы перемещаете страницу вокруг нее, она не перемещает оверлей, и это зависит от того, сколько контента находится на странице. Есть ли способ разместить его с jquery, чтобы он также находился в центре окна?
Спасибо!
Ответы
Ответ 1
Для этого вам не нужен jQuery. Если целью является всегда иметь div в центре окна, вы можете сделать это с помощью CSS.
<div class="mydiv"></div>
.mydiv{
width:300px;
height:300px;
background:red;
position:fixed;
top:50%;
left:50%;
margin-top:-150px; /* negative half the size of height */
margin-left:-150px; /* negative half the size of width */
}
Ответ 2
вы можете получить размеры окна следующим образом:
var wWidth = $(window).width();
var wHeight = $(window).height();
то вы можете получить свои всплывающие размеры:
var popupWidth = $('#popupId').width();
var popupHeight = $('#popupId').height();
выполните некоторые вычисления:
var popupTop = (wHeight/2) - (popupHeight/2);
var popupLeft = (wWidth/2) - (popupWidth/2);
и окончательно разместите свое всплывающее окно:
$('#popupId').css({'left': popupLeft, 'top': popupTop});
Я не тестировал это, но вы должны подумать над этим.
//редактировать
Кстати, это, вероятно, будет работать как позиционирование css. Если вы хотите, чтобы он перемещался по мере перемещения страницы, вы просто вводили код в функцию и вызывали его при событиях при перемещении страницы.
Ответ 3
Это можно сделать с помощью CSS. Если всплывающее окно является абсолютным, то установите значение слева на 50%, а margin-left - отрицательное значение, равное половине ширины поля.
Ответ 4
Есть несколько способов сделать это, хороший, чтобы сохранить оверлей в центре, даже если пользователь изменяет размер окна, делая следующее:
var overlay = $("#overlay"),
top = $(window).scrollTop() - (overlay.outerHeight() / 2),
left = -(overlay.outerWidth() / 2);
overlay.css({'margin-top': top,'margin-left': left});
а затем css (вы могли бы иметь фиксированную позицию и избавиться от scrollTop в javascript):
#overlay {
position: absolute;
top:50%;
left: 50%;
z-index: 1000;
}