Fade overlay

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Stela
Forum Commoner
Posts: 46
Joined: Tue Aug 12, 2008 12:38 pm

Fade overlay

Post by Stela »

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

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>
Post Reply