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

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

OP 澄清后编辑:

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