How to prevent event leak through an overlay element in IE?

Question

Given the following HTML:

<div class="with-shield"> <div class="shield"></div> <input type="radio"/> </div> ​ 

... and CSS:

 .with-shield { position: relative; } .shield { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; } 

( Fiddle )

FireFox and Chrome do not allow you to click on a switch (since .shield is located on top of it), however IE9 (and I believe that these are older versions) (although the developer tools show .shield correctly) is in place).

How can I change CSS to allow .shield to absorb click events (i.e. so that the user can select a radio) in IE?

I need this when I present the results of a customer survey to employees simply by republishing the form view; I want to add an overlay so that random changes to employees change (I already disabled tabIndex , etc.).

Answer 1

And even later at the party, but this is what I did:

Just use base64 encoding of transparent GIF in 1x1 pixels as background, this stops all clicks / tags (also checked on IE9 and IE8).

 background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7); 

Answer 2

You recently had the same issue. Muthu Kumaran is excellent, except that it did not account for IE <8. Here is how you can do this:

 .with-shield { position: relative; } .shield { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 100; background-color:#fff; opacity:0; filter: alpha(opacity = 001); } 

Unfortunately, neither jsfiddle nor jsbin work properly in IE8, so I can show you, but I created a test page on my local machine and tested it, and it works as expected.

Answer 3

Bit late, but do something like this:

 #BlockAction{bottom: 0; left: 0; position: absolute; top: 0; right:0; z-index: -1;} #BlockAction.Blocked{z-index: 1000; cursor:wait;background-color:#fff;opacity:0} 

Background color and opacity will serve for IE9, allowing transparent background clicks to go through. Other browsers click on a click without it.