JQuery всплывающее окно найти истинный верх - PullRequest
Новая
       17

JQuery всплывающее окно найти истинный верх

2 голосов
/ 23 марта 2012

У меня есть скрипт всплывающего окна jquery, и для центрирования всплывающего окна на экране используется следующий код: 

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $(".popupContent").height();
  var popupWidth = $(".popupContent").width();

  $(".popupContent").css({
    "position": "fixed",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    });
  }

Это работает, за исключением случаев, когда мне нужно активировать всплывающее окно внутри тега div. Похоже, гораздо дальше, иногда со страницы. Я предполагаю, что он думает, что верхняя часть тега div - это верх страницы.

Как я могу решить эту проблему и заставить ее найти фактическую верхнюю страницу главной страницы?

Ответы [ 3 ]

2 голосов
/ 27 марта 2012

Вы можете попробовать это, чтобы центрировать элемент в браузере 

$.fn.center = function () {
    this.css("position","absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
    return this;
}


$(".popupContent").center();

Вот пример .

Обновление: пример .

0 голосов
/ 27 марта 2012

Вы можете сделать это легко и надежно практически без JavaScript.Просто немного css: 

.popupContent {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 500px;
    margin-top: -200px;   /* adjust upwards by half the height  */
    margin-left: -250px;  /* adjust leftwards by half the width */
}

Идея состоит в том, чтобы расположить верхний левый угол вашего элемента в центре страницы, а затем сдвинуть его вверх и влево, добавив отрицательное поле на половину высотыи ширина.

Если вы не знаете высоту или ширину во время разработки, также не указывайте поля.Укажите top: 50% и left: 50% и установите поля во время выполнения с помощью JavaScript: 

var popup = $(".popupContent");
popup.css({
    marginTop: popup.height() / 2,
    marginLeft: popup.width() / 2
});
0 голосов
/ 27 марта 2012

Сначала переместите всплывающее окно за пределы области. 

function centerPopup(){
  var windowWidth = document.documentElement.clientWidth;
  var windowHeight = document.documentElement.clientHeight;
  var popupHeight = $(".popupContent").height();
  var popupWidth = $(".popupContent").width();

  $(".popupContent").css({
    "position": "fixed",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
    })
    .prependTo('body'); //Put it at the top of the body dynamically
    // .appendTo('body'); or the bottom
  }
...