Reveal/Hide Information Overlays

An overlay, in this article, is a div containing content that's not displayed until requested. When the overlay content is requested, the div is displayed over the top of already-existing content.

When content is displayed in an overlay, the existing content on the web page doesn't have to shift around to make room.

The reason for presenting certain content in an overlay only upon request is because it's better left off the page — but available in case it's specifically asked for. Examples:

1. Lengthy explanations for simple concepts.

2. Mathematical formulas for arriving at a stated result.

3. Text that in another media would be suitable as a footnote.

4. Information needed only in specific circumstances.

Any content of interest for a few but boring or extraneous for many may be considered for presentation only upon request.

Here are three examples. The "(More)" link publishes an overlay with more information.

How It Works

The parent div contains the content that will be published when the web page loads. It also contains a link to display the overlay containing additional content.

Within the parent div is another div. This is the overlay. It contains a link to dismiss itself. The overlay div does not display when the web page loads, only when the link in the parent div is clicked.

Below is the source code for the first parent div and overlay div set in the above example.

The parent div code has a beige background color and the overlay div code has an ivory background color. You can see how the overlay div is within the parent div.

<div style="position:relative; 
            border-radius:.5em;
            border:1px solid blue; 
            padding:.5em;
            text-align:left;
            margin:.25em 0 .25em 0">
Some things are easy. 
<a style="font-size:80%;" href="javascript:RevealTheOverlay('easy-message-overlay')">(More)</a>

<div id="easy-message-overlay" 
    style="position:absolute; 
           left:1em; 
           top:-1em; 
           display:none; 
           z-index:99;
           background-color:white;
           border-radius:.5em;
           text-align:left;
           border:1px solid blue; 
           padding:.5em;">
<p>
Things you're good at are easy.
</p>
<div style="text-align:center;"><a style="font-size:80%;" href="javascript:DismissLatestOverlay()">(Dismiss)</a></div>
</div>
</div>

In a moment, you'll have the JavaScript and the rest of the parent/overlay div sets. But first, let's have a look at the above code, especially the important color-coded parts.

A.
Each div, the parent and the overlay, has its own CSS style. The declarations that are absolutely required are colored purple.

The parent div:

1. position:relative is required so the overlay div can be positioned relative to the location of the parent div.

The overlay div:

1. position:absolute is what makes it an overlay div instead of a normal-flow div. (The optional left and top CSS properties are for positioning the overlay div.)

2. display:none; is required to prevent the overlay div from being displayed when the page first loads.

3. z-index:99; is required to keep the overlay div on top of subsequent content on the page.

B.
Each div has a link that calls a JavaScript function. They are colored red. (The copy-and-paste JavaScript function code is presented further below.)

The parent div link has a JavaScript call that references the overlay div id value, colored blue. (See "C", below.) The overlay div link JavaScript call has no references.

C.
The overlay div id is colored blue. The JavaScript call in the parent div link (mentioned above) has the value of the same id, also colored blue.

The JavaScript

The JavaScript is copy and paste. It can be anywhere on the web page. Near the bottom of the page immediately above the cancel </body> tag will work.

Here is the code. A note follows.

<script type="text/javascript">
var LatestRevealedOverlay = false;

function RevealTheOverlay(id)
{
    DismissLatestOverlay();
    document.getElementById(id).style.display = "block";
    LatestRevealedOverlay = id;
}

function DismissLatestOverlay()
{
    if( ! LatestRevealedOverlay ) { return; }
    document.getElementById(LatestRevealedOverlay).style.display = "none";
    LatestRevealedOverlay = false;
}
</script>

A note: The JavaScript automatically un-displays the previous overlay div if it is still displayed at the time another overlay div is requested.

Therefore, if the user doesn't close an overlay div, it will be closed automatically upon display of a different one. You can see it in action by using the examples further above in this article.

All the HTML Code for the Example

Here is the code for each of the three parent/overlay div sets that compose the examples.

<div style="position:relative; 
            border-radius:.5em;
            border:1px solid blue; 
            padding:.5em;
            text-align:left;
            margin:.25em 0 .25em 0">
Some things are easy. 
<a style="font-size:80%;" href="javascript:RevealTheOverlay('easy-message-overlay')">(More)</a>

<div id="easy-message-overlay" 
    style="position:absolute; 
           left:1em; 
           top:-1em; 
           display:none; 
           z-index:99;
           background-color:white;
           border-radius:.5em;
           text-align:left;
           border:1px solid blue; 
           padding:.5em;">
<p>
Things you're good at are easy.
</p>
<div style="text-align:center;"><a style="font-size:80%;" href="javascript:DismissLatestOverlay()">(Dismiss)</a></div>
</div>
</div>


<div style="position:relative; 
            border-radius:.5em;
            border:1px solid purple; 
            padding:.5em;
            text-align:left;
            margin:.25em 0 .25em 0">
Some things are really, really hard. 
<a style="font-size:80%;" href="javascript:RevealTheOverlay('hard-message-overlay')">(More)</a>

<div id="hard-message-overlay" 
    style="position:absolute; 
           left:1em; 
           top:-1em; 
           display:none; 
           z-index:99;
           background-color:white;
           border-radius:.5em;
           text-align:left;
           border:1px solid purple; 
           padding:.5em;">
<p>
Things you have no idea how to do are really, really hard to do.
</p>
<p>
Steel is really, really hard, too.
</p>
<div style="text-align:center;"><a style="font-size:80%;" href="javascript:DismissLatestOverlay()">(Dismiss)</a></div>
</div>
</div>


<div style="position:relative; 
            border-radius:.5em;
            border:1px solid red; 
            padding:.5em;
            text-align:left;
            margin:.25em 0 .25em 0">
And some things are just plain fun. 
<a style="font-size:80%;" href="javascript:RevealTheOverlay('fun-message-overlay')">(More)</a>

<div id="fun-message-overlay" 
    style="position:absolute; 
           left:1em; 
           top:-1em; 
           display:none; 
           z-index:99;
           background-color:white;
           border-radius:.5em;
           text-align:left;
           border:1px solid red; 
           padding:.5em;">
<p>
Things you enjoy are the fun things. And it's impossible to have too much fun!
</p>
<div style="text-align:center;"><a style="font-size:80%;" href="javascript:DismissLatestOverlay()">(Dismiss)</a></div>
</div>
</div>

The color coding is the same as the parent/overlay div set in the How It Works section.

To test it, paste the above and the JavaScript on a test page and have fun. The parent/overlay div sets can be added or deleted, and can be customized as you please.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager