Html 使用纯CSS的弹出框下方的遮罩效果_Html_Css

Html 使用纯CSS的弹出框下方的遮罩效果

html css

Html 使用纯CSS的弹出框下方的遮罩效果,html,css,Html,Css,我将网页上的任何div转换为弹出框，方法是向div添加一个类，turnitooverlay。（请参阅）现在，当弹出窗口显示时，我还想创建一个遮罩，将褪色的层（或遮罩）放置到显示在弹出框下面的其他页面元素上。为了创建这个掩码，我采用了使用psuedo选择器的纯css方法，这样当一个弹出框（一个turnitooverlay元素）可见时，就可以简单地显示/隐藏掩码。我添加了以下css： .turnIntoOverlay:after { content: ""; background-

我将网页上的任何div转换为弹出框，方法是向div添加一个类，

turnitooverlay

。（请参阅）

现在，当弹出窗口显示时，我还想创建一个遮罩，将褪色的层（或遮罩）放置到显示在弹出框下面的其他页面元素上。为了创建这个掩码，我采用了使用psuedo选择器的纯css方法，这样当一个弹出框（一个

turnitooverlay

元素）可见时，就可以简单地显示/隐藏掩码。我添加了以下css：

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

一切工作正常，除了遮罩出现在弹出窗口上，即使我保持z指数低于弹出窗口的z指数。同样令我惊讶的是，它只在

z-index=-1

时有效。你能建议如何纠正这个问题吗

请看这里我从

中取出了位置：fixed
。现在它可以工作了。
问题在于。：after
内容不能位于其父内容的下方，除非父内容不在堆叠上下文中，在您的情况下，这是不可选择的z-index:-1
之所以有效，是因为它是一种特殊情况，优先于父内容。这就是为什么它不会影响文本，而是影响背景和边框。请参阅上的列表。您的：在{z-index:-1}之后
是列表中的第2个
您唯一的选择是使用额外的包装器：
<div class="turnIntoOverlay"><div>this div is convertible to pop up!<input/></div></div>


不幸的是，IE8及以下版本在这方面存在缺陷。此外，他们不知道不透明度
，并且使用-ms过滤器
对没有布局的元素不起作用，例如伪类：before
和：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之后我会说）
.
我的解决方案是使用：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: "";
}

谢谢，但这对我来说不是一个解决方案，因为我需要固定的位置。除了它不再是一个弹出窗口之外。你对这种css方法的跨浏览器兼容性有什么要说的吗？这适用于所有使用：after
的解决方案：一个问题是IE8及以下版本不知道不透明度
。您可以使用-ms filter
，但遗憾的是IE仅对具有布局的元素应用过滤器，并且伪：after
没有布局。@Gareth Cornish:此解决方案存在问题。当overlay div上有一个滚动条时，对于其中溢出的标记，滚动条是可见的，但不能通过mousepress+move滚动，尽管它与鼠标滚轮一起工作。请参阅JSFIDLE-您对此有任何解决方案吗？谢谢Linus，虽然您提出的解决方案很有效，但我不喜欢在div.turnitooverlay
中添加额外的div
。此外，我需要注意在div.turnitooverlay
中放置1个&仅1个div。@Gareth的解决方案似乎可以克服这些情况。您如何将类turnIntoOverlay
添加到
s？有时客户端通过javascript，有时默认情况下我看到了。如果您通过javascript添加类，为什么不简单地使用一个全局
，并在添加.turnitooverlay
的同时添加一个类.show
或其他内容到#overlay？我认为这会简化很多事情。正如我所说，它只是有时通过javascript添加&有时它默认出现在页面上，或者作为ajax响应的一部分接收。在css方法之前，我确实想过使用js方法，但这让事情变得太复杂了。你看到什么问题了吗？您想对Gareth的解决方案发表意见吗？
.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);
}

.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: "";
}