Home › How to add a transparent layer to your web page

How to add a transparent layer to your web page 

Dr. Xi
Joined:
04/09/2007
Posts:
727

April 26, 2007 23:00:25    Last update: January 10, 2011 22:15:32
If you ever wonder how those "cool" dialog boxes are made, copy and paste the following code to a file and test it with your browser. This is probably the simplest code for such effects. If you don't know what I mean, try it anyway.
  • Code
  • Demo
<html>
	<head>
		<title>Test Overlay</title>
		<style type="text/css">
			#overlay {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 90;
				width: 100%;
				height: 100%;
				background-color: #000;
				filter:alpha(opacity=40);
				opacity: 0.4;
			}

			#dialog {
				position: absolute;
				top: 200px;
				left: 300px;
				z-index: 99;
				padding: 4px;
				background-color: white;
				border: #ade 2px solid;
			}
		</style>

		<script language="JavaScript" type="text/javascript">
		function showDialog() {
			document.getElementById("overlay").style.display='';
			document.getElementById("dialog").style.display='';
		}

		function hideDialog() {
			document.getElementById("overlay").style.display='none';
			document.getElementById("dialog").style.display='none';
		}
		</script>
	</head>
	<body>
		<div id="dialog" style="display:none;">
			<p>Dialog contents...</p>
			<center>
				<button onclick="hideDialog();">OK</button>
			</center>
		</div>
		<div id="overlay" style="display:none"></div>
		<button onclick="showDialog();">
			Click to show dialog
		</button>
	</body>
</html>
Share |
| Comment  | Tags
 
Easy email testing with http://www.ximailstop.com