Internet Explorer、z-index和"modality“
Internet Explorer、z-index和"modality“
提问于 2011-03-22 05:48:17
在Firefox 3.6中，下面的代码模拟了一个模式覆盖：
<html>
<body>
<div id="modal" style="position: fixed;
top: 0; left: 0;right: 0; bottom: 0;
background: rgba(255,0,0,0.5);
z-index: 10;">
<div style="border-style:solid;border-width:5px;
position: fixed;top: 50%;left:50%">
<h2>I am modal</h2>
<form><input type=submit></form>
</div>
</div>
<div id="notModal" style="height:500px;
border-style:solid;border-width:5px;">
<div>
<h2>a I am not modal</h2>
<p>lorem ipsit dolar foo bar baz</p>
<form><input type=submit></form>
</div>
</div>
</body>
</html>具体地说，可以选择"modal“div中的文本，并且可以单击"modal”div中的submit按钮，但不能选择或单击"notModal“div中的任何内容。
在Internet Explorer8中，情况并非如此；"notModal“文本可以被选中，"notModal”submit可以被剪切。
有没有办法在不使用javascript的情况下，在不同的IE版本下工作呢？
谢谢。
回答 2
Stack Overflow用户
回答已采纳
发布于 2011-03-22 05:58:34
IE在透明度方面有很多问题(它不支持rgba)。还有一些关于z索引的已知问题。
试试像this这样的东西。
备注：
- 大多数IE z索引问题可以通过将z索引应用于您尝试为其指定z索引的元素的父元素来修复。
- 我将模式窗口移出了
cover(以前称为modal)目录，以便IE不会尝试对其应用筛选器。
示例
HTML
<div id="cover"></div>
<div id="modalbox">
<h2>I am modal</h2>
<form><input type=submit></form>
</div>
<div id="notModal">
<div>
<h2>a I am not modal</h2>
<p>lorem ipsit dolar foo bar baz</p>
<form><input type=submit></form>
</div>
</div>CSS
body {
z-index: 1;
}
#cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter:alpha(opacity=50); /* Only applies to IE */
background: red; /* This will be overwritten by browsers that support rgba */
background: rgba(255,0,0,0.5); /* IE ignores this since it's not supported */
z-index: 10;
}
#modalbox {
border:solid 5px #ccc;
position: fixed;
top: 50%;
left:50%;
z-index: 20;
}
#notModal {
height:500px;
border:solid 5px #ccc;
z-index: 5;
}Stack Overflow用户
发布于 2011-03-22 05:55:51
IE无法识别rgba颜色，请尝试使用rgb并使用filter:alpha(opacity=50)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5384162
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号