CODEWITHSUNDEEP
htmlcssinternet-exploreriframe
wickjon
wickjon

Reputation: 920

div overlay for blocking clickable events iframe not working in IE

I have an Iframe displaying webpages and I need to block all click events for that page. I used the following code 

 <div id="IframeWrapper" style="position: relative;">
    <div id="iframeBlocker" style="position: absolute; top: 0; left: 0; width:95%; height:95%;z-index:2"></div>
     <iframe  id="iframewebpage" style="z-index:1"  runat="server"></iframe>
    </div>

This works fine for all browsers except IE( both 8 and 9). any workarounds ?

Upvotes: 4

Views: 11309

Answers (3)

aldian
aldian

Reputation: 41

On the div containing "position: absolute", you need to add these styles:

{
  background-color: white;
  opacity: 0;
}

Yeah, IE is always weird.

Upvotes: 4

pain123
pain123

Reputation: 5

I had a similar problem and i manage to solve it by setting a height and widht to div="IframeWrapper" and after that it worked! :-)

/Andreas

Upvotes: 0

talegna
talegna

Reputation: 2403

Not sure why the above doesn't work, the theory all looks correct to me, but when setting the background it appears to render the div successfully. Although the below code will not allow you to use the scrollbars either on the iframe it should be an OK starting point. I've removed the z-index as rendering the blocker after the iframe means it will be rendered "on top" of it.

<div id="IframeWrapper" style="position: relative;">
    <iframe  id="iframewebpage" style="z-index:1"  runat="server" src="http://www.w3schools.com" ></iframe>
    <div id="iframeBlocker" style="position:absolute; top: 0; left: 0; width:95%; height:95%;background-color:aliceblue;opacity:0.1;"></div>
</div>

Upvotes: 5

Related Questions