jQuery的彈出找到真正的頂級

Question

我有一個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標籤的頂部是頁面頂部。

我該如何解決這個問題並使其找到實際的主頁頂端？

Answer 1

首先移動div外的彈出窗口。

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 
    } 

Answer 2

您可以輕鬆，可靠地做到這一點，幾乎沒有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 
}); 

Answer 3

你可以試試這個居中元素在瀏覽器中

$.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(); 

這裏是一個example。

更新：example。