Question

我在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的简单模态，但是我想构建一个完整的模态窗口，这个窗口占用了更明亮的100％空间，但如果你向下滚动你可以看到覆盖后面仍然存在的页面，导致覆盖不占用100％的网页，而只占用户可以看到的部分的100％。

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

任何提示？感谢。

Answer 1

你可以这样做：

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

或将叠加位置固定

#overlay{
position:fixed;
}

Answer 2

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

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

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

var b = document.getElementsByTagName("body")[0];
b.style.overflow = (b.style.overflow == "") ? "hidden" : "";

在javascript中阻止简单模态对话框的背景

2 个答案: