使用纯CSS在弹出框下面的蒙版效果

Question

我通过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;
}

现在,当弹出窗口显示时,我还想创建一个遮罩,将褪色层(或遮罩)放在弹出框下方显示的其他页面元素上.为了创建这个掩码,我使用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低于弹出窗口.令我惊讶的是,它只适用于z-index=-1.你能建议如何纠正这个问题吗？

见的jsfiddle这里

Answer 1

问题是堆叠上下文.该:after含量不能低于它的父,除非家长会出堆叠内容而你的情况是没有选择的.z-index: -1之所以有效,是因为它是一个特例,优先于父母的内容.这就是为什么它不影响文本,但影响背景和边框.请参阅堆叠上下文列表.你:after { z-index: -1 }是谁.列表中的2.

您唯一的选择是使用额外的包装器:

<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>

将当前样式移动.turnIntoOverlay到.turnIntoOverlay > div并将叠加层应用于外部div并使用正面z-index:

.turnIntoOverlay:after {
    z-index: 1;
}

这是一个演示.

不幸的是IE8及以下版本都是错误的.他们也不知道opacity和使用-ms-filter不对没有布局的元素工作,如伪类:before和:after.

当然,如果你还是使用了一个额外的包装器,你可以给另一个包装器background-color.不需要:after那么:

.turnIntoOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: skyblue; /* for old browsers */
    background-color: rgba(135, 206, 235, 0.4);
}

与伪类方法相比,这包括IE8及更低版本的一些修复.通过使用应用于IE的透明png可以做得更好.有了这个,它在每个浏览器中看起来都是一样的(我会说IE6之后).

这是一个演示.

Answer 2

我的解决方案是同时使用: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