0

我正在尝试创建一个灯箱,该灯箱最好基于最少的 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;
    }
}

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

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

截图:灯箱适用于以上部分 截图:灯箱不适用于下部

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

提前感谢您的帮助。

4

2 回答 2

1

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

OP澄清后编辑:

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

于 2013-05-30T17:59:38.563 回答
0

改变

backgroundOverlay.style.position = "absolute";

backgroundOverlay.style.position = "fixed";

configDialog.style.position = "absolute";

configDialog.style.position = "fixed";
于 2013-05-30T18:09:44.253 回答