【问题标题】：Position a pop-up div relative to the link相对于链接定位弹出 div
【发布时间】：2014-10-17 14:03:02
【问题描述】：

我遇到了一个问题。我一页有 10 张图片。点击每一个，都会弹出一个弹出窗口，点击图片的内容会从数据库中加载并显示在 div（弹出窗口）中。

它适用于第一组图像（第一行）。但是当我单击第二组和第三组图像行时。弹出窗口打开，但我必须一直向上滚动才能看到弹出窗口及其内容。（由于图像在底部，而 Pop 显示在页面顶部）

我通过制作 Position: Fixed !important 尝试了以下操作（我部分成功地制作了显示视口中心的弹出窗口。但是如果弹出窗口的内容超过视口的高度，则其余内容已隐藏，无法向下滚动查看更多信息。）

请参考此图片以获得更清晰的信息

JavaScript

// Script for fetching the height of the pop-up based on viewport inner height

$(document).ready(function () {
    function setHeight() {
        windowHeight = $(window).innerHeight();
        $('#panelpopup').css('height', windowHeight);
    };
    setHeight();

    $(window).resize(function () {
        setHeight();
    });
});

CSS

#panelpopup {
    max-width: 800px;
    height: auto !important;
    text-align:center;
    background-color:#fff !important;
    border:solid 1px #333;
    position:fixed !important;
    // I tried absolute first, but the pop up comes on top 
    top:20%;
    left:50%;
    margin:0px 0 0 -400px;
    border-radius:6px;
    z-index:100100 !important;
}

HTML

<div id="panelpopup-wrap"><!-- This is the transparent area around the pop up --></div>
<div id="panelpopup"> <!-- Dynamic Content Goes here --></div>

等待您的宝贵支持

提前致谢

【问题讨论】：

请创建一个 jsFiddle。
T-那张照片令人印象深刻。但是，如果您希望我们进一步帮助您，您需要向我们提供 HTML 结构、弹出窗口和正文的 CSS 以及它的 JS。你可以使用Stack Snippets 或jsFiddle 来展示一个有问题的例子。如果您使用 jsfiddle，请同时在您的问题中发布代码。
可以通过$(window).scrollTop()获取垂直滚动的像素数。用于使用 position:absolute 定位弹出窗口。
我上面的评论或者你可以设置溢出：滚动弹出窗口
仍然很难重现问题进行测试。如果您想得到一个好的答案，请展示该问题的完整工作示例。

标签： javascript jquery css

【解决方案1】：

我挖出了一个非常古老的脚本，可以为你完成这项工作。它滚动窗口直到被引用元素的右下角出现在视图中。

可以进行一些改进（这是很久以前的事情了 ;-)，但它仍然有效。

function coverdiv(o) {
    var wh, ww;
    var ps = document.getElementById(o).getBoundingClientRect();
    if (typeof (window.innerWidth) == 'number') {
        wh = window.innerHeight;
        ww = window.innerWidth;
    } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        wh = document.documentElement.clientHeight;
        ww = document.documentElement.clientWidth;
    } else {
        return false;
    }
    var diffH = wh - ps.bottom;
    var diffW = ww - ps.right;
    diffH = (diffH < 10) ? (20 - diffH) : 0;
    diffW = (diffW) < 10 ? (30 - diffW) : diffW = 0;
    window.scrollBy(diffW, diffH);
}

只需使用元素的 id 调用它即可。

Here is a working fiddle

【讨论】：

先生，这不能解决问题.. 谢谢