IE7 nested div display bug

I have 2 alert boxes inside of a "shadow" layer I use to 开发者_运维百科cover the rest of the page. When a user clicks a button, I show the shadow layer and the appropriate alert box. when they finish, I hide both those divs. This works great in all browsers except IE7, where if you open one alert box, close it, then open the other, both alert boxes show. How can I get around this issue?

<div id="shadowLayer" style="display:none; z-index:2001; position:fixed; width:100%; height:100%;>
<div id="MessageLightbox" style="display:none; z-index:3001; position:absolute;>  
<iframe></iframe>
</div>
<div id="RecordLightbox" style="display:none; z-index:4001; position:absolute;>
<iframe></iframe>
</div>
</div>

$('#shadowLayer').css('display', 'block');
$('#RecordLightbox').css('display', 'block');

$('#shadowLayer').css('display', 'none');
$('#RecordLightbox').css('display', 'none');

$('#shadowLayer').css('display', 'block');
$('#MessageLightbox').css('display', 'block');

$('#shadowLayer').css('display', 'none');
$('#MessageLightbox').css('display', 'none');

Its a bug in IE. Try some recomendation off of google for work arounds with nested div's.

Try the link "The IE 'non-disappearing content' bug"

from

http://www.positioniseverything.net/explorer.html