9

我通过向 div 添加一个类，将我网页上的任何 div 转换为弹出框turnIntoOverlay。（见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;
}

现在，当显示弹出窗口时，我还想创建一个遮罩，将褪色层（或遮罩）放置在弹出框下方的其余其他页面元素上。为了创建这个遮罩，我采用了纯 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

4

3 回答 3

5

The problem is the stacking context. The :after content can not be below it's parent, except if the parent would be out of the stacking context which in your case is no option. z-index: -1 works because it's a special case and has priority over the parents content. That's why it does not effect the text, but effects background and border. See the list on Stacking Contexts. Your :after { z-index: -1 } is nr. 2 in the list.

Your only option would be using an additional wrapper:

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

moving your current styles for .turnIntoOverlay to .turnIntoOverlay > div and applying the overlay to the outer div with a positive z-index:

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

Here is a demo.

Unfortunately IE8 and below are buggy on that. Also they do not know opacity and using -ms-filter does not work on elements without layout like pseudo classes :before and :after are.

Of course, if you'd use an additional wrapper anyway, you could just give the other wrapper the background-color. No need for :after then:

.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);
}

Compared to the pseudo class approach, this includes a little fix for IE8 and below. Can be made even better by using a transparent png which is applied to IE. With that, it looks quite the same in every browser (after IE6 I would say).

Here is a demo.

于 2013-05-10T07:12:34.123 回答
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

于 2013-05-10T07:20:59.140 回答
0

我取出了position: fixed，.turnIntoOverlay现在它可以工作了。

于 2013-05-10T07:03:01.107 回答