Центрирование экрана на экране, даже если страница прокручивается.

Должно быть простое решение. Я пытаюсь работать с jQuery для достижения эффекта, который я ищу, но он просто не работает ... Также я подозреваю, что есть проблема с решением CSS.Центрирование экрана на экране, даже если страница прокручивается.

У меня есть DIV под названием «всплывающее окно» со следующим CSS:

#popup { 
position: absolute; 
left: 0px; 
top: 0px; 
right: 0px; 
bottom: 0px;}

Он покрывает экран, как оверлей ... Внутри этого DIV у меня есть еще один под названием #pnlEditOverlay, что коробка, которая имеет уведомление или форму редактирования или что-то подобное.

pnlEditOverlay является то, что я пытаюсь центрирования по вертикали на странице

Я использую JQuery, чтобы расширить высоту #popup на высоту документа, так что она охватывает все:

$("#popup").css('height', $(document).height());

Моя проблема в том, что я хотел бы вертикально центрировать #pnlEditOverlay на странице, даже если страница достаточно большая, где ее можно прокручивать.

Я использую JQuery, чтобы изменить этот DIV:

var offset = $("#pnlEditOverlay").offset(); 

     var topPadding = 75; 
     $(window).scroll(function() { 
      if ($(window).scrollTop() > offset.top) { 
       $("#pnlEditOverlay").stop().animate({ 
        marginTop: $(window).scrollTop() - offset.top + topPadding 
       }); 
      } else { 
       $("#pnlEditOverlay").stop().animate({ 
        marginTop: 75 
       }); 
      }; 
     }).scroll();

Однако это не совсем то, что я хочу. Это только переустановки, когда страница прокручивается ... Итак, когда пользователь уже прокручивается на полпути вниз, div скрывается до тех пор, пока они не прокрутятся ...

В любом случае. Мне было интересно, есть ли там элегантные CSS-решения. Я просто хочу поставить на место мертвую точку на коробке, даже если страница прокручивается. У меня все в порядке с использованием jQuery, чтобы установить стили div, однако i хотел бы избежать реализации события click, поскольку есть кнопки MANY MANY, которые могут привести к отображению div.

Итак, есть вопросы: есть ли стиль CSS или небольшой кусок jQuery, который будет центрировать div по вертикали и держать его там, даже если страница прокручивается?

Спасибо

источник

2012-02-25 Nugs

Проконсультируйтесь со всеми связанными вопросами. Переполнение стека показывает вам, когда вы вводите свой вопрос (вы можете найти их в правой части этой страницы сейчас). Всегда есть хороший шанс, что вы найдете свой ответ в одном из них. Особенно верно для этого вопроса, который является общим вопросом с дизайнерами. –

Для этого действительно простое решение для CSS. Во-первых, использовать это для popup:

#popup 
{ 
position:fixed; 
height:100%; 
width:100%; 
}

и это для вашего overlay:

#overlay 
{ 
position:fixed; 
top:50%; 
left:50%; 
margin-top:-y; 
margin-left:-x; 
}

где х и у являются половина ширина и высота вашего overlay DIV соответственно. Поэтому вам нужно знать высоту и ширину этого div.

Это позаботится обо всех ваших проблемах, даже если страница будет прокручена.

источник

2012-02-25 19:20:00

Я знаю ширину, но высота #overlay является переменной. Любые идеи о том, как обойти это? – Nugs

На самом деле это не так важно, поскольку у меня есть фиксированный запас сверху ... Это сработает, спасибо! – Nugs

Одно редактирование, которое я сделал бы, это установить положение #popup. Если у вас есть поля на div в вашем контенте, #popup div может неправильно позиционировать ... left: 0px; top: 0px; right: 0px; bottom: 0px; – Nugs

При открытии всплывающего окна вам необходимо учесть начальное смещение прокрутки окна. Вместо того, чтобы оставить его с верхней позицией абсолютного 0, вам нужно использовать Javascript, чтобы переместить его в текущее значение самого верхнего видимого пикселя окна.Я считаю, что это параметр offsetHeight, но я не тестировал.

Кроме того, FWIW, есть ли опция «модального диалога» в JQuery, которая делает то, что вы ожидаете, из коробки? Почему-то это не работает?

источник

2012-02-25 19:21:40

Центрирование экрана на экране, даже если страница прокручивается.

ответ

Смежные вопросы