css - 在灯箱中向下滚动后如何获得透明背景？

Question

我从这里找到了一个使用简单 java 脚本的灯箱代码。这里的问题是当我向下滚动页面时没有出现透明背景。这是我的 css

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}

.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
   border-radius:10px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

我得到的是jsfiddle

请给我一些建议

谢谢阅读 ：）

Answer 1

试试这个，

.black_overlay {
    display: none;
    position:fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
}

.white_content {
    display: none;
    position:fixed;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border-radius:10px;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

http://jsfiddle.net/Jz4Zq/2/

Answer 2

您正在使用height:100%它所包含的元素的 100% 高度。top滚动时您必须调整元素的属性，或通过 javascript 设置高度。