Help
Provide a stylesheet setting for a div element that is sized and positioned to cover the entire web page:
.overlay
{
background-color: #000;
opacity: .7;
filter: alpha(opacity=70);
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
}Create the div element on demand, adding whatever other content is to be displayed
to the div element:
function expandPhoto() {
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class", "overlay");
document.body.appendChild(overlay);
}
When the overlay is no longer needed, remove it from the page:
function restore() {
document.body.removeChild(document.getElementById("overlay"));
}Creating an overlay in a web page consists of creating a div element set to a z-index higher than anything else in the page, absolutely positioned at the upper left of the page, and sized 100%.
In the solution, this is achieved more easily by created a CSS style setting for the overlay class that manages the appearance of the element, and then using document.createElement and appendChild to add it to the page. To restore the page, the overlay element is removed.
Page overlays are popular for displaying ads, logins, or providing important site messages. They are also useful with photos. The example below contains a web page with four photo thumbnails. Clicking any of the thumbnails opens an overlay, and displays a larger size photo.
Creating an overlay for displaying a larger photo
<!DOCTYPE html>
<head>
<title>Overlay</title>
<style>
img
{
padding: 5px;
}
#outer
{
width: 100%; height: 100%;
}
.overlay
{
background-color: #000;
opacity: .7;
filter: alpha(opacity=70);
position: fixed; top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
}
.overlayimg
{
position: absolute;
z-index: 11;
left: 50px;
top: 50px;
}
</style>
<script>
function expandPhoto() {
// create overlay and append to page
var overlay = document.createElement("div");
overlay.setAttribute("id","overlay");
overlay.setAttribute("class", "overlay");
document.body.appendChild(overlay);
// create image and append to page
var img = document.createElement("img");
img.setAttribute("id","img");
img.src = this.getAttribute("data-larger");
img.setAttribute("class","overlayimg");
// click to restore page
img.onclick=restore;
document.body.appendChild(img);
}
// restore page to normal
function restore() {
document.body.removeChild(document.getElementById("overlay"));
document.body.removeChild(document.getElementById("img"));
}
window.onload=function() {
var imgs = document.getElementsByTagName("img");
imgs[0].focus();
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick=expandPhoto;
imgs[i].onkeydown=expandPhoto;
}
}
</script>
</head>
<body>
<div id="outer">
<p>Mouse click on image to expand the photo. To close expanded
photo, mouse click on image.</p>
<img src="dragonfly2.thumbnail.jpg" data-larger="dragonfly2.jpg"
alt="image of common dragonfly on bright green and pink flowers" />
<img src="dragonfly4.thumbnail.jpg" data-larger="dragonfly4.jpg"
alt="Dark orange dragonfly on water lily" />
<img src="dragonfly6.thumbnail.jpg" data-larger="dragonfly6.jpg"
alt="Dark orange dragonfly on purple water lily" />
<img src="dragonfly8.thumbnail.jpg" data-larger="dragonfly8.jpg"
alt="Dragonfly on bright pink water lily" />
</div>
</body>This example creates an overlay that fits the size of the page as it’s currently opened. Note the CSS setting for the overlay, in particular the fixed positioning. This ensures that the overlay fits the window even if the contents require you to scroll to the right, or down, to see all of the contents.
The image below shows the page with the overlay and one of the photos displayed.
Demonstration of an overlap and photo
The application works with Firefox, Opera, Chrome, Safari, and IE8. IE7 doesn’t like the use of setAttribute with the class attribute. If you need to support IE7, set the className attribute directly:
overlay.className = "overlay";
Learn more about this topic from Javascript Cookbook.
Covering both ECMAScript 5 and HTML5, Javascript Cookbook helps you take advantage of the latest web features, including HTML5's persistent storage mechanisms and drawing canvas. You'll find solutions for integrating these features with Javascript into UIs that people will enjoy using. The recipes in this book not only help you get things done, they'll also help you develop applications that work reliably in every browser.
