⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Web Page Overlay Tutorial Transparent Cover

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
Learn two different ways of applying overlays and transparent covers to your page data. It is most commonly used to bring a special new window to the user's attention while the page they are on fades back temporarily. 
<!DOCTYPE html>
<html>
<head>
<style>
div#overlay {
	display: none;
	z-index: 2;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	text-align: center;
}
div#specialBox {
	display: none;
	position: relative;
	z-index: 3;
	margin: 150px auto 0px auto;
	width: 500px; 
	height: 300px;
	background: #FFF;
	color: #000;
}
div#wrapper {
	position:absolute;
	top: 0px;
	left: 0px;
	padding-left:24px;
}
</style>
<script>
function toggleOverlay(){
	var overlay = document.getElementById('overlay');
	var specialBox = document.getElementById('specialBox');
	overlay.style.opacity = .8;
	if(overlay.style.display == "block"){
		overlay.style.display = "none";
		specialBox.style.display = "none";
	} else {
		overlay.style.display = "block";
		specialBox.style.display = "block";
	}
}
</script>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
  <p>Special box content ...</p> 
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>
<!-- End Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
  <h2>My web page heading</h2>
  <p>Some web page content ...</p>
  <button onmousedown="toggleOverlay()">Apply Overlay</button>
</div>
<!-- End Normal Page Content -->
</body>
</html>
▲