Internet Explorer, z-index, and "modality"
The following, in Firefox 3.6, simulates a modal overlay:
<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>
In particular, text in the "modal" div can be selected, and the submit button in the "modal" div can be clicked, but nothing in the "notModal" div can be selected or clicked.
In Internet Explorer 8, that's not the case; the "notModal" text can be selected and teh "notModal" submit can be cliecked.
Is there a way to make this work under the various versions of IE, without using开发者_如何学C javascript?
Thanks.
IE has a lot of issues with transparency (it doesn't support rgba). There are also known issues with z-indexing.
Try something like this.
Notes:
- Most IE z-index issues can be fixed by applying z-indexes to the parent elements of the elements you're trying to specify a z-index for.
- I moved the modal window out of the
cover(previouslymodal) div so that IE doesn't try to apply the filter to it.
Example
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;
}
IE won't recognize a rgba color, try to use a rgb and use filter:alpha(opacity=50)
加载中,请稍侯......
精彩评论