Recently, working with a site that uses modal windows as part of the visitor’s process flow, I ran into a bug in Internet Explorer 8 and below where an iframe (containing an embedded video in this case) was displayed above all modal windows, so the users couldn’t see or click on the modal windows.

Setting position:absolute didn’t change anything, and even setting the respective z-indexes didn’t make any difference – the iframe was stubborn.

Because of that, I decided to target IE specifically to get rid of the iframe while the modal window was active. It didn’t need to be shown anyway, so why not make it display:none when the modal windows are opened?

I found that the best way to do that is to target IE8 and below with a piece of javascript. First, place the following code in your header:

<!--[if lte IE 8]>
<script type="text/javascript">
	<!--
	function HideFrame() {
	  var fr = document.getElementById ("sunrise");
	if(fr.style.display=="none") {
	   fr.style.display="block";
	}
	else {
	   fr.style.display="none";
	  }
	 }
	//-->
</script>
<![endif]-->

Then call the function with the same link as you’re using to call the modal pop-up:

<a href="#" onclick="HideFrame()">Sample text</a>

This can be done with all of the links that open modal windows.

See an example of this at work on Bankstown Helicopters’ site.