0

更新

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

因此，如果用户向下滚动了一个长页面并单击以使弹出窗口发生，则弹出窗口将回到页面顶部 - 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 会弹出，但除非用户滚动回顶部，否则无法看到。

无论页面当前滚动到何处，如何使它正确地居中在窗口上。

这个问题和我调查过的其他问题并没有为我解决这个问题。有任何想法吗？

4

1 回答 1

1

听起来您想要的是“固定”的 CSS 位置（CSS Positioning 101）。这将使对象相对于视口（浏览器）而不是相对于文档保持固定。这将影响 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 */
}

要以视口为中心，您需要计算相对于视口的位置。完整的JSFiddle（来自您的原始版本，添加了滚动内容和样式，以便在您滚动时保持按钮与您同在）具有所有 JavaScript，但由于您使用的是 jQuery，因此您只需要使用$(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;

$(document)碰巧对宽度没问题，因为文档通常是宽度的 100%，但$(window)无论如何你都应该使用。

于 2012-05-19T18:59:36.470 回答