Question

我的页面中间弹出一个js弹出窗口。问题是，当用户向下滚动到页面底部并单击按钮以触发弹出时，弹出窗口将显示在屏幕的顶部而不是中间（因为用户已经向下滚动，所以他/她不在页面的中间位置。）

我想要的是，无论用户在哪里观看，弹出窗口都会位于用户屏幕的中间位置。

function centerPopup(){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(".popupContent").height();
var popupWidth = $(".popupContent").width();
$(".popupContent").css({
    "position": "absolute",
    "top": windowHeight/2-popupHeight/2,
    "left": windowWidth/2-popupWidth/2
});
//this is needed for ie6
$(".backgroundPopup").css({ "height": windowHeight });
}

或者可以在触发弹出窗口的按钮下弹出一个？

Answer 1

我没有测试它，但有可能它会起作用

function centerPopup(){

var windowWidth = $(window).width();
var windowHeight = $(window).height();
var popupHeight = $(".popupContent").outerHeight();
var popupWidth = $(".popupContent").outerWidth();
var windowScrollTop =  $(window).scrollTop();
var windowScrollLeft = $(window).scrollLeft();

$(".popupContent").css({
    "position": "absolute",
    "top": Math.max(0,((windowHeight -popupHeight) /2)+windowScrollTop) + "px",
    "left": Math.max(0,((windowWidth -popupWidth) /2)+windowScrollLeft) + "px"
});

}

使javascript弹出屏幕中间而不是页面中间

1 个答案: