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.
Join Our Telegram Channel to Stay Updated
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment