Covering a Web Page with a Semi-Transparent Pane

Introduction
On the net, you might be working on a web page and you take a decision on it, suddenly you see the whole page covered by a semi-transparent colored pane. This transparent pane may have a small Form, which you must fill and click the OK button before the pane will go away for you to carry on working with your normal web page.

Such panes usually appear for the purpose of protection. When the pane appears you cannot type or click or do anything on the page. You must take an action on the pane (Form) before it would go away for you to carry on working. In this article I show you how to create such a pane with its Form. I will not talk about the reasons for protection; I will only explain how to create and remove the pane.

You need basic knowledge in HTML, JavaScript and CSS to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what has been typed.

CSS Layers
In a normal web page, you have the BODY element and HTML elements inside the BODY element. CSS has made it possible for you to have an element in front of another element, as you look through the screen. If an element is in front of another, we say it is at a layer above (actually in front) of the other. You can have many such layers with elements being in front of one another. If the elements (e.g. images) overlap (sideways), then you would know which one is foremost, which one is behind, which one is next, and so on.

To give an element a layer quality, you need to give it the CSS position property with the value, absolute. With this, you can then use the CSS left and top properties to position the layered element anywhere with reference to the top-left corner of its containing element. If the tags of the layered element are within the tags of the BODY element, then the BODY element is the layered element's containing element; this is just an example of what is a containing element.

How do you then use code to differentiate between the layers? By default the BODY element behaves as if it is at layer zero. The elements placed in the normal way in the BODY element behave as if they are at layer 1, in front of the BODY element. You can put elements at layer 2 in front of the elements placed normally in the BODY element. You can go on to place elements at layer 3, in front of layer 2, then layer 4, layer 5, etc.

Each layer has an integer associated with it called the z-index. The layer numbers mentioned above are z-indices. CSS has a property called the z-index property. The value for the z-index property is the z-index.

Note: If a layer is covering another, the user can only act on the foremost layer and not on the layer behind.

Element to use as Pane
The pane is what covers your web page and prevents the user from accessing the web page content. From now on, I will be calling this pane, curtain. From the explanation above, if you can have a containing element with a semi-transparent image (repeating) background; if you can put the containing element in a layer in front of all others, and let it fill the browser's client area, then you would have got a curtain. That is just what we shall do. We need to choose a containing element. Examples of containing elements are the DIV, DD and Paragraph elements. DIV is the most obvious containing element, so let us choose it.

Simple Example
Let us consider a simple example. In this simple example, you have a web page that has only a button in the BODY element. When you click this button, the curtain appears and prevents you from clicking this same button. The curtain has an Input Text Control and also a button. When you click the button of the curtain, the curtain disappears allowing you to work on the web page.

Coding
It is now time to code. This is the BODY element code:

First name:

Uncover Client

Cover Client

There are two elements in the BODY element. These elements are the DIV and a button. When the web page is displayed, only this button is shown. The DIV element is not displayed. When you click the button, the DIV element is displayed and it covers the whole client area of screen. Remember, when the client area is covered by the DIV the user cannot access anything behind the DIV.

As content to the DIV element, is a Form element. The Form element has an Input Text control and a button. When the DIV element is displayed, you see the Form element. When you click the button of the Form element, the DIV element and its Form element are removed.

Attributes of the DIV element
The DIV element has two attributes: the id attribute and the style attribute. The id attribute has the ID of the DIV; we shall see its use shortly. The style attribute has a lot of properties with corresponding values. The first property is the position property. For any element to appear in a layer, in principle, it should have the position property with the value, absolute. The style attribute has the text-align property with value, center. This centers the content (the Form) of the DIV horizontally. The width and height of the DIV are given the value, 100%. 100% width means the entire width of the client area. 100% height means the entire height of the client area. To be sure that the client area is covered from its beginning (top-left), the style attribute's top and left position properties have each the value, 0%.

Since the DIV is not displayed initially, the value of its display property is none. When you click the button of the BODY element, JavaScript changes this value to block, and so it is displayed. When you then click the button of the Form element (in the DIV), this value is changed back to none, by JavaScript.

The z-index value of the DIV element is 10. Assuming that no other element has a z-index value that high, then the DIV will cover the entire client area, putting any other element behind it.

The last two properties of the style attribute of the DIV element deal with the background image for the DIV. Normally, your background image should be small, to reduce the download time. The first of these two properties downloads the background image. The second property makes the image to repeat all over the DIV's background and so covering the client area. The background image is semi-transparent, and so you can see through and know what is behind it.

The Style Attribute of the Form element
There are two properties for this style attribute. The first one is the position property with the value, relative; this means the Form element can be displaced from its normal position. The next property is the top property that displaces it 45% downward. With this Form vertical displacement within the DIV and the text-align property with value center, of the DIV, the Form is roughly vertically and horizontally positioned on the screen client area. Note: the centering feature is in the start tag of the DIV element and the displacement feature is in the start tag of the Form element.

The JavaScript
This is the JavaScript. There are two functions in the script. The first one, "coverClient()" is called to cover the client area with the DIV. The second one "unCoverClient()" is called to remove the DIV. These are the functions:

function coverClient()
{
document.getElementById('DC').style.display = "block";
}

function unCoverClient()
{
document.getElementById('DC').style.display = "none";
}

The first function is called when the button in the BODY element (not Form) is clicked. It uses the ID of the DIV to set the value of the display property of the DIV to "block". In that way, the DIV element is displayed.

The second function is called, when the button in the Form is clicked. It uses the ID of the DIV to set the value of the display property of the DIV, back to "none". In that way, the DIV element is removed.

Note: in practice, the BODY element will have many elements; the button in the Form element might be a submit button, which would call (execute) a program at the server.

Caution
If you assemble all the above code samples and try the resulting code, the result will work with Mozilla Firefox 2, Netscape 8, Opera 9, Safari 3 and their later versions. With Internet Explorer 6 the entire client area is not covered. Well, the BODY and DIV elements have margins, borders and paddings. Now each browser gives its own width for each of these three components, for each of the two elements. If in your design, the margin of the BODY and the DIV have the same width, the border of the BODY and the DIV have the same width and the padding of the BODY and the DIV have the same width, then there should be synchronization and the DIV will cover all the entire client area for all the browsers. If you try this and it does not work, then Internet Explorer has a weakness.

Summary
- Use a DIV element to cover the client area of the screen.
- Give the DIV element an absolute position property and the highest z-index.
- Let the background image of the DIV element be semi-transparent.
- Use JavaScript to display and remove the DIV.

Chrys