разместите оверлей в центре страницы с помощью jquery - PullRequest
Новая
       3

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

11 голосов
/ 20 февраля 2011

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

Спасибо!

Ответы [ 4 ]

34 голосов
/ 20 февраля 2011

Вам не нужен 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 */
}
3 голосов
/ 20 февраля 2011

Вы можете получить размеры окна следующим образом: 

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. Если вы хотите, чтобы он перемещался по мере перемещения страницы, просто включите код в функцию и вызовите его в событиях при перемещении страницы.

2 голосов
/ 20 февраля 2011

Это можно сделать с помощью CSS. Если всплывающее окно имеет абсолютное позиционирование, установите для левого угла значение 50%, а для поля слева - отрицательное значение, равное половине ширины поля.

1 голос
/ 20 февраля 2011

Есть несколько способов сделать это, хороший способ сохранить оверлей в центре, даже если пользователь изменяет размер окна, выполнив следующие действия: 

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