Fade overlay
Posted: Wed Feb 01, 2012 2:26 pm
Hello…
I'm using this code to make a Overlay (with a photo) disappear, showing a simple webpage. But I wanted to disappear with a fade out. Is it possible, here is the code that I'm using
I'm using this code to make a Overlay (with a photo) disappear, showing a simple webpage. But I wanted to disappear with a fade out. Is it possible, here is the code that I'm using
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: 1; /*older Mozilla*/
-khtml-opacity: 1; /*older Safari*/
opacity: 1; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
</style>
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "<table width='100%' height='100%'> <tr> <td align='center' valign='middle' width='100%' height='100%'><img src='icon.jpg'></td></tr></table>";
setTimeout(function(){
thediv.style.display = "none";
thediv.innerHTML = '';
}, 1200)
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
</head>
<body onLoad="clicker();">
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>Open Window</a>
</body>