Question

我使用here中的简单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设置高度。

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

2 个答案: