When I click my overlay in different browsers like Firefox, Chrome, and IE9, the onClick function is triggered as expected. However, in IE8, it seems like the box is not clickable at all and the content behind it is receiving the click events instead. Here's a snippet of my code:
HTML:
<div id="pageblock" onclick="closelogin()"></div>
<div id="loginbox"><!--This is where my form is--></div>
CSS:
#loginbox{
z-index: 10;
position: absolute;
height: 83px;
top: 105px;
right: 20px;
width: 400px
overflow: hidden;
padding: 5px;
}
#pageblock{
display: none;
position: fixed;
z-index: 7;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #000;
opacity: 0.6;
height: 100%;
width: 100%;
}
CSS for IE8 and earlier:
#pageblock{
background: transparent !important;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
}
Hopefully this helps pinpoint the issue! Thanks!