相对于链接定位弹出div

Question

我正面临一个问题。 我在一页中有10张图片。 单击每个时，将显示弹出窗口，并从数据库加载单击图像的内容并显示在div中（弹出窗口）。

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

我通过使位置：固定！重要（我部分成功地使弹出窗口显示视口的中心）尝试以下操作。但是如果弹出内容超出视口的高度，则其余内容将被隐藏，没有选项向下滚动以查看更多信息。）

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

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>

等待您的宝贵支持

提前致谢

Answer 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调用它即可。

这是一个工作小提琴