Page is a not externally linkable
dupalo - 8:53 pm on Aug 2, 2012 (gmt 0)
Hi all, I am testing an overlay and I can't get it to work correctly in IE7 and 8, in that the full page is not visible the opacity is set to 0.
It works ok in every browser and also IE9.
Here's the full code.
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="main_container"><a href="#">This triggers the overlay</a></div>
<div class="main_container"><a href="#">and this too</a></div>
<div id="full_page_overlay">
</div>
<div id="overlay">
<p>text on the overlay</p>
<a href="#">Close the overlay here</a>
</div><!-- END OF car_overlay -->
</body>
</html>
CSS /* OVERLAYS */
#overlay{
//background:url('overlay_close.png');
width:500px;
height:300px;
border:1px solid black;
position:fixed;
top:30%;
left:50%;
margin-left:-250px;
z-index:99999;
background-color:magenta;
display:none;
}
#full_page_overlay{
background:#000000;
opacity:0.35;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=35); /* For IE8 and earlier */
top:0px;
bottom:0px;
left:0px;
right:0px;
position:fixed;
z-index:99998;
display:none;
}
/* END OF OVERLAYS */
.main_container{
position:relative;
border:1px solid red;
width:300px;
height:300px;
}
javascript: $(document).ready(function(){
$('.main_container a').click(function(){
$('#full_page_overlay').fadeIn('fast');
$('#overlay').fadeIn('slow');
});
$('#overlay a').click(function(){
$('#overlay').remove();
$('#full_page_overlay').remove();
});
});
Other than these 3 declarations
opacity:0.35;what else can I do to get it to work in IEs?!
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter:alpha(opacity=35); /* For IE8 and earlier */
ANy help much appreciated