Hi,
I wanted to create a DIV that would block the user from clicking on components, such as form fields.
See this example:
<html>
<head>
<title>Block Screen</title>
</head>
<body>
<input type="text" value="blocked">
<div style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%"></div>
</body>
</html>
This works fine in Firefox, however Internet Explorer 8 still allows you to edit the text field. I noticed however that the moment I specify a background-color, I cannot edit the text field anymore. I then combined this with opacity for IE like this example:
<html>
<head>
<title>Block Screen</title>
</head>
<body>
<input type="text" value="blocked">
<div style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background-color: black; filter: alpha(opacity=0)"></div>
</body>
</html>
This actually works for IE. I also tried background-color: transparent, but that does not work.
Could anyone tell me why this background-color makes a difference?
And also if there is any way to do this in a simpler way for for Internet Explorer 8.
