Question

更新

我刚刚更新了jsFiddle，以便您可以看到“弹出”正在发生以及它是如何从未居中的。从顶部开始总是200px。

因此，如果用户向下滚动一个长页面并单击以弹出窗口，弹出窗口将在页面顶部备份 - 200px而不是在可见屏幕上居中。

http://jsfiddle.net/JYgcj/40/

我会尝试下面的答案，并用

的结果进行更新

我的布局中包含一个隐藏的div作为部分

这是部分

javascript函数显示此div用于显示ajax请求的结果

function showResultPopUpDiv(divId, title) {

    var popUpId = document.getElementById(divId);
    var popUpHeader = title;
    var originalDivHTML;
    var topPos = 200;
    var popUpWidth;
    var midPos;
    var leftPos;
    var spinnerOpts;

    //Insert header text & open pop up
    popUpId.style.display = "block";
    document.getElementById("ajaxResultPopUpHeaderText").innerHTML = popUpHeader;

    //Set position dimensions
    popUpWidth = popUpId.offsetWidth / 2;
    midPos = $(document).width() / 2;
    leftPos = midPos - popUpWidth;

    //Position pop up (center)
    popUpId.style.top = topPos + "px";
    popUpId.style.left = leftPos + "px";

    //Insert spinning loader code here
    ... //left out for brevity
}

如果视图长于单个屏幕并且用户已滚动到底部并单击了提交按钮，则会弹出此div，但除非用户滚动回到顶部，否则无法看到。

如何在页面当前滚动到的任何位置正确显示窗口的中心位置。

This question以及我调查过的其他人并没有为我解决这个问题。有什么想法吗？

Answer 1

听起来你想要的是“固定”（CSS Positioning 101）的CSS位置。这将使对象相对于视口（浏览器）而不是相对于文档保持固定。这会影响top和left的表现方式。

确保您有类似的内容：

#ajaxResultPopUpHeaderText {
    position: fixed; /* Make the position fixed to the viewport,
    so it stays in the same place no matter how much the user scrolls */
}

要在视口中心，您需要计算相对于视口的位置。 full JSFiddle（从您的原始分叉，添加滚动和样式内容以在滚动时保留按钮）具有所有JavaScript，但由于您正在使用jQuery，因此您只需要使用{ {1}}代替$(window)。

$(document)

//Set position dimensions var popUpHeight = popUpId.offsetHeight / 2; var centrePos = $(window).height() / 2; topPos = centrePos - popUpHeight; popUpWidth = popUpId.offsetWidth / 2; midPos = $(window).width() / 2; leftPos = midPos - popUpWidth;恰好适用于宽度，因为文档通常是宽度的100％，但无论如何都应该使用$(document)。

显示隐藏的div并以屏幕为中心

1 个答案: