Javascript Tutorial: Gray-out the screen, Focusing on a box by darkening background content

RSS

Javascript Tutorial: Gray-out the screen, Focusing on a box by darkening background content

30 Jan

In this tutorial you will learn about using Javascript DOM to Disable the page content by covering it with a layer (of div tag) or simply Graying out the screen.

A little Blah Blah

You might have seen on many websites, when you click a link, the whole page darkens and you are focused on a specific box. Here is the tutorial on how to create it.
Example www.pixel2life.com (click on login button)

Lets begin

Here is a code of the page which we are going to modify.
Old HTML code comes here

<html>
<head><title>Title</title></head>
<body>
<div id="outsider">
<div id="IEcenterFix">Some text here</div>
<div id="initiator">Click me</div>
</div>
</body>
</html>

Add a div tag inside body tag. Assign it with an id say “cover”. Add following style to the cover div. Also add a div for box that will be visible when you cover(darken) the screen, let its id be “box”.

Updated HTML

<html>
<head><title>Title</title></head>
<body>
<div id="cover">
</div>
<div id="box">Sample box</div>
<div id="outsider">
<div id="IEcenterFix">Some text here</div>
<div id="initiator">Click me</div>
</div>
</body>
</html>

CSS:

#cover {
width: 100%;
background-color: #333333;
position: absolute;
left: 0px;
top: 0px;
visibility: hidden;
opacity:0.75;
filter:alpha(opacity=75);
z-index: 998;
}
#box {
position: relative;
width: 600px;
top: 100px;
z-index: 999;
visibility: hidden;
height: 300px;
}

Cover

This is the div layer that will cover up the screen. So its width must be 100% of the document.
This div is just after body tag so making its position absolute we make sure that it wont cover any space after body tag (ie it will be floating).
Its position will be 0px from left 0px from right. Its opacity will be 75%.
Now we don’t want it to be active at first so we set its visibility to hidden. We added a z-index of 998 just to make sure it is placed at top.

Box

We define the height and width of box as 300px and 600px respectively. We define its position from top. Its position from left must be set by javascript to keep it in center.

All the modification to HTML and CSS are complete. Now we have to add some javascript.
Here is the code.

document.getElementById("cover").style.height = window.screen.height;
// document.getElementById("cover") finds an element with id cover
// window.screen.height returns the height of the window.
// So we set the height of cover div to height of window.

var winW, winH;
browserWindowSize();

document.getElementById("box").style.left = winW/2-300;
// we set the position of box from left to >> (center position of window) – (width of the box)
// Value of winW is obtained by function browserWindowSize(); which is defined below

// This function is taken from http://www.developersnippets.com/2007/05/13/cross-browser-snippet-for-finding-the-size-of-the-browser-window/
function browserWindowSize() {
var browserWinWidth = 0, browserWinHeight = 0;
if( typeof( window.innerWidth ) == ‘number’ ) {
//Non-IE
browserWinWidth = window.innerWidth;
browserWinHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6+ in ‘standards compliant mode’
browserWinWidth = document.documentElement.clientWidth;
browserWinHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4 compatible
browserWinWidth = document.body.clientWidth;
browserWinHeight = document.body.clientHeight;
}
winW = browserWinWidth;
winH = browserWinHeight;
// alert( ‘Browser Window Width = ‘ + browserWinWidth +’ Browser Window Height = ‘+browserWinHeight);
}

function coverIt() {
// Set the visiblity of cover to visible
document.getElementById("cover").style.visibility = "visible";
// set the visibility of box to visible.
document.getElementById("box").style.visibility = "visible";
}
// Call the function coverIt when somebody clicks on anything whose id it "initiator"
document.getElementById("initiator").onclick = coverIt;

Now you want the cover to hide when you click on it. To make it happen just add this javascript function.

function backToNormal() {
// Set the visiblity of cover to hidden
document.getElementById("cover").style.visibility = "hidden";
}
// Call the function backToNormal() when somebody clicks on cover
document.getElementById("cover").onclick = backToNormal;

If you want to add a link in box to close the box just add the following code to the link.

<a href="#" onclick = "backToNormal()">Close me</a>