IE10-使用z-index的透明叠加

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中似乎什么都没有覆盖，页面上的所有元素都是active.Strangely，如果我添加一个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 及更低版本允许在没有任何背景或内容时通过元素执行操作。您必须为叠加层添加背景。如果你不希望它可见，请使用透明的：

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

IE10-使用z-index的透明叠加

IE10- transparent overlay using z-index

html

javascript

css

internet-explorer

z-index