IE8 允许用户与模态窗口遮挡的元素进行交互答案

【问题标题】：IE8 allows user to interact with elements obscured by modal windowIE8 允许用户与模态窗口遮挡的元素进行交互
【发布时间】：2012-03-31 05:28:26
【问题描述】：

我有一个弹出窗口（应该是模态的），用于向用户发送消息的对话（#modal）。我添加了一个“背景”元素 (#blinds) 来隐藏和防止用户与页面上的其他元素进行交互。这在 Firefox 中效果很好，但在 IE8 中效果不佳。

在 IE8 中，我可以四处点击、编辑输入字段并提交表单。有没有办法用 HTML 和 CSS 来防止这种情况？我需要 jQuery 解决方案吗？

CSS;

#blinds {
    background-color: rgba(0, 0, 0, 0.5);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80000000, endColorstr=#80000000)";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1000;
}

#modal {
    position: fixed;
    z-index: 1001;
    display: none;
}

HTML;

<div id='blinds'></div>
<div id='modal'>
    <h1></h1>
    <span>X</span>
    <p></p>
</div>

这是一个 jsFiddle，它说明了我的 IE8 问题。 http://jsfiddle.net/cAkzq/

【问题讨论】：

向叠加层添加一个虚拟点击事件。
在叠加层上添加一个点击和按键处理程序仍然允许我点击它的“下方”并与元素交互。
在测试 jsFiddle 中没有看到这个。
使用点击处理程序，而不是按键。将焦点设置到叠加层以将光标也从下面的元素上移开。

标签： html css internet-explorer

【解决方案1】：

是-ms-filter 在做这件事。为您的颜色叠加使用半透明 PNG，它应该可以解决问题。供应商标签是实验性的，可以是非标准的。

【讨论】：