Позиционируйте оверлей в центре страницы с помощью jquery

Это должен быть простой вопрос, но я не могу понять его. Я сделал всплывающее окно с использованием jquery, и я хочу, чтобы он располагался в центре страницы. Независимо от того, как сайт настроен и разрешение. Сейчас я просто позиционирую его абсолютно с помощью CSS, но проблема в том, что если вы перемещаете страницу вокруг нее, она не перемещает оверлей, и это зависит от того, сколько контента находится на странице. Есть ли способ разместить его с jquery, чтобы он также находился в центре окна?

Спасибо!

Ответ 1

Для этого вам не нужен jQuery. Если целью является всегда иметь div в центре окна, вы можете сделать это с помощью CSS.

Проверьте рабочий пример http://jsfiddle.net/5Q6FU/

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