1

我有一个简单的 javascript 模式对话框，我自己做的。CSS如下：

#overlay {
     visibility: hidden;
     position: absolute;
     left: 0px;
     top: 0px;
     width:100%;
     height:100%;
     text-align:center;
     z-index: 1000;
     background-color: rgba(0, 0, 0, 0.6);
}

#show {
     width:300px;
     margin: 100px auto;
     background-color: #fff;
     border:1px solid #000;
     padding:15px;
     text-align:justify;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 14px;
     font-weight: bold;
     line-height: 20px;
}

javascript如下：

function overlay() {
    var el = document.getElementById("overlay");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
    if (el.style.visibility == "visible"){
        el.scrollIntoView();
    } 
}

我遇到的问题比看起来要大。我从网上获取了这个模态对话框代码来制作一个只有 javascript 和 css 的简单模态，但我想构建一个完整的模态窗口，这个窗口占据了 broser 中可见空间的 100%，但是如果你向下滚动你可以看到仍然存在于覆盖层后面的页面，因为覆盖层没有占据网页的 100%，而只占据了用户可以看到的部分的 100%。

当用户向下滚动覆盖时，我是否必须禁止该行为？我怎样才能做到这一点？

有什么提示吗？谢谢。

4

2 回答 2

2

你可以做：

$('#overlay').height($(document).height());

或固定覆盖位置

#overlay{
position:fixed;
}
于 2013-10-23T10:06:34.850 回答
1

很简单，只需更改叠加层的css即可：

#overlay {
     position: fixed;
     overflow: auto;
     ...
}

然后在 javascript 函数中添加这些行（在“if”语句之外）：

var b = document.getElementsByTagName("body")[0];
b.style.overflow = (b.style.overflow == "") ? "hidden" : "";
于 2013-10-23T10:02:58.670 回答