JAVA SCRIPT - Adding a Page Overlay

 Adding a Page Overlay


Problem

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

Solution

Provide a stylesheet setting for a div element that is sized and positioned to cover the entire web page. It could be completely opaque, but most overlays are transparent enough to see the underlying page material:


.overlay
{
 background-color: #000;
 opacity: .7;
 filter: alpha(opacity=70);
 position: absolute; top: 0; left: 0;
 width: 100%; height: 100%;
 z-index: 10;
}


Create a div element (or other element) on demand, adding whatever other content is to be displayed to the element:


function expandOverlay() {
 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"));
}

EXPLAIN

Creating an overlay in a web page consists of creating an 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 to this recipe, this is achieved more easily by creating 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 photos, videos, ads, logins, or providing im‐ portant site messages. Example 5-6 contains a web page with a message. Clicking on the message block removes the overlay and message.


Creating an overlay for displaying a message 


<!DOCTYPE html>
<head>
<title>Overlay</title>
<style>
.overlay
{
 background-color: #000;
opacity: .5;
 filter: alpha(opacity=50);
 position: fixed; top: 0; left: 0;
 width: 100%; height: 100%;
 z-index: 10;
}
.overlaymsg
{
 position: absolute;
 background-color: yellow;
 padding: 10px;
 width: 200px;
 height: 200px;
 font-size: 2em;
 z-index: 11;
 top: 50%;
 left: 50%;
 margin-left: -100px;
 margin-top: -100px;
}
</style>
<script>
function displayPopup() {
 // create overlay and append to page
 var overlay = document.createElement("div");
 overlay.setAttribute("id","overlay");
 overlay.setAttribute("class", "overlay");
 document.body.appendChild(overlay);
 // create message and append to overlay
 var msg = document.createElement("div");
 var txt =
 document.createTextNode("Please join our mailing list! (Click to close.)");
 msg.appendChild(txt);
 msg.setAttribute("id", "msg")
 msg.setAttribute("class","overlaymsg");
 // click to restore page
 msg.onclick=restore;
 // append message to overlay
 document.body.appendChild(msg);
}
// restore page to normal
function restore() {
 document.body.removeChild(document.getElementById("overlay"));
 document.body.removeChild(document.getElementById("msg"))
}
window.onload=function() {
 displayPopup();
}
</script>
</head>
<body>
<p>Existing material.</p>
</body>

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 message is positioned in the center using a CSS trick: set the left and top position to 50% of the page’s width and height, and then set the block’s margins to a negative value equal to half the block’s height and width.

We could append the message directly to the overlay, and when the overlay is removed, the message is also removed with removeChild(). However, the overlay’s opacity set‐ ting would impact on its child elements.

To ensure the message is bright and easy to read, it’s appended to the web page document, but its z-index setting is set higher than the overlay, placing it on top of the overlay

We could also statically create a section to display and hide it when not in use, but this just clutters up the page contents and can, depending on how it’s formatted, have adverse impact on screen readers. In addition, if you want the same overlay on all pages, it’s simpler to create it as part of the site’s JavaScript library and automatically include it in each page that uses the library.

0 comments:

Post a Comment