O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

13.6. Adding a Page Overlay

Problem

You want to overlay the web page in order to display a message, or provide an expanded photo.

Solution

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"));
}

Discussion

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. Example 13-3 contains a web page with four photo thumbnails. Clicking any of the thumbnails opens an overlay, and displays a larger size photo.

Example 13-3. 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>

Example 13-3 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.

Figure 13-3 shows the page with the overlay and one of the photos displayed.

Demonstration of an overlap and photo

Figure 13-3. 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";

See Also

See Recipe 12.15 for more on using setAttribute with CSS styles.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required