javascript - 灯箱定位问题

Question

我正在尝试创建一个灯箱，该灯箱最好基于最少的 JS（框架，但是它们可能很“轻”，是不允许的）。在各种资源的帮助下，我写了以下一点 JS：

var dialogWritten = false;

function getZIndex(elem) {
    var elems = document.getElementsByTagName(elem);
    var highest = 0;
    for (var i = 0; i < elems.length; i++) {
        var zindex = document.defaultView.getComputedStyle(elems[i], null).getPropertyValue("z-index");
        if ((zindex > highest) && (zindex != 'auto')) {
            highest = zindex;
        }
    }
    return highest;
}

function displayDialog() {
    if (!dialogWritten) {
        var backgroundOverlay = document.createElement("div");
        backgroundOverlay.style.display = "block";
        backgroundOverlay.style.position = "absolute";
        backgroundOverlay.style.top = "0%";
        backgroundOverlay.style.left = "0%";
        backgroundOverlay.style.width = "100%";
        backgroundOverlay.style.height = "100%";
        backgroundOverlay.style.backgroundColor = "#000000";
        backgroundOverlay.style.zIndex = getZIndex('*') + 1;
        backgroundOverlay.style.opacity = "0.8";
        document.body.appendChild(backgroundOverlay);
        dialogWritten = true;

        var configDialog = document.createElement("div");
        configDialog.style.display = "block";
        configDialog.style.position = "absolute";
        configDialog.style.top = "25%";
        configDialog.style.left = "25%";
        configDialog.style.width = "50%";
        configDialog.style.height = "50%";
        configDialog.style.backgroundColor = "#acacac";
        configDialog.style.zIndex = getZIndex('*') + 1;
        configDialog.style.padding = "10px";
        configDialog.style.fontFace = "sans-serif";
        configDialog.innerHTML = '<p>Configuration dialog</p>';
        document.body.appendChild(configDialog);
        dialogWritten = true;
    }
}

灯箱显然有效，但事实证明，覆盖仅适用于页面的最顶部，而不适用于下部。

屏幕截图将有助于使描述清晰：

我应该怎么做才能使灯箱的覆盖应用于整个页面？

提前感谢您的帮助。

Answer 1

这取决于您想要实现的目标 - 您是否希望灯箱位置固定（相对于视口）？如果是这种情况，这很简单 - 只需将位置设置为固定而不是绝对。

OP澄清后编辑：

如果您希望灯箱覆盖应用于整个页面，请将背景覆盖的位置设置为固定。

Answer 2

改变

backgroundOverlay.style.position = "absolute";

至

backgroundOverlay.style.position = "fixed";

和

configDialog.style.position = "absolute";

至

configDialog.style.position = "fixed";