Question

我正在努力美化javascript alert。我需要一个透明的叠加层，覆盖整个页面而不是警报块，就像原始javascript alert一样。

html：

<html>
    <body>
        <div class="alert-overlay">
            <div class="alert-block"></div>
        </div>
    </body>
</html>

叠加层的CSS：

.alert-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 1100;
    left:0;
    top:0;
}

警报栏的css：

.alert-block{
    position:absolute;
    top:30%;
    left:50%;
    width: 300px;
    background-color: #fff;
    margin-left: -150px;
    border-radius: 5px;
    z-index:1200;
}

它适用于IE11，chrome和firefox，但在IE10中失败 - 。

重叠似乎在IE10中没有覆盖任何内容，页面上的所有元素都是活动的。换句话说，如果我添加background-color:black，它将覆盖除警报块之外的所有内容，并使页面处于非活动状态，如同起源javascript alert，但附加背景除外，这不是我想要的。

那么如何让透明覆盖层在IE10上运行？这是一个z-index错误吗？

Answer 1

IE10有一些问题。尝试给出带过滤器的背景。这是你如何做到的 -

background:white; filter:alpha(opacity=1);

一些有用的链接：

z-index problem in IE with transparent div

IE z-index trouble on element with transparent background

希望它有所帮助。

Answer 2

IE10及更少允许在没有任何backgorund或内容时通过元素进行操作。您必须为叠加层添加背景。如果您不希望它可见，请使用透明的：

background-color: rgba(0,0,0,0);

使用z-index的IE10-透明覆盖

2 个答案: