html - 使用纯CSS的弹出框下方的蒙版效果

通过将turnIntoOverlay类添加到div，可以将网页上的所有div转换为弹出框。 (请参阅JSFiddle)

.turnIntoOverlay {
    position: fixed;
    background-color: white;
    top: 60px;
    max-width: 680px;
    z-index: 80;
    border: 6px solid #BBB;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    max-height: 800px;
    overflow: auto;
    padding:10px;
}

现在，当显示弹出窗口时，我还想创建一个 mask ，将一个褪色的图层(或 mask )放置到出现在弹出框下方的其他页面元素上。要创建此蒙版，我求助于使用psuedo选择器的纯css方法，以便仅在可见弹出框(turnIntoOverlay元素)时才显示/隐藏该蒙版。我添加了以下CSS:

.turnIntoOverlay:after {
    content: "";
    background-color: whitesmoke;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.5;
    top: 0;
    left: 0;
}

一切正常，除了即使我保持z-index低于弹出窗口时， mask 也会出现在弹出窗口中。令我惊讶的是，它仅在z-index=-1时有效。
你能建议如何纠正这个问题吗？

在此处查看JSFiddle

最佳答案

我的解决方案是同时使用:before和:after来解决您的问题:

.turnIntoOverlay {
    position: fixed;
    background-color: white;
    top: 60px;
    max-width: 680px;
    border: 6px solid #BBB;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
    max-height: 800px;
    overflow: auto;
    padding:10px;
    z-index: 80;
}

.turnIntoOverlay:before {
    content: "";
    background-color: skyblue;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
    top: 0;
    left: 0;
}

.turnIntoOverlay:after{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    z-index: -1;
    content: "";
}

JSFiddle

关于html - 使用纯CSS的弹出框下方的蒙版效果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16476523/