Question

我有一个弹出窗口，（应该是模态的），对用户的消息对话（#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>

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

Answer 1

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

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

1 个答案: