Pure CSS Modal Overlays

If you’ve read my previous blogs, you know that I tend to focus on very user-friendly tips and tricks, small tidbits that make the browsing experience more appealing to the end users. Nowadays, if you don’t spruce up your content and make it look like a million bucks, you’ll lose your users’ interest. They say you have less than eight seconds to make an impression!

One method to increase usability I employ on nearly every site I build has been integrating modal overlays to display various content. An overlay can contain nothing more than a paragraph of instructions or even complicated forms.
Though I am an advocate of jQuery and PHP, I find that sometimes these can be overkill for tasks such as this; you can accomplish the same effect using nothing more than CSS and a little bit of standard Javascript (without need for library inclusion).

You can see some examples of the “lightbox effect” here: http://lokeshdhakar.com/projects/lightbox2/ . This is exactly what we’re going to recreate. Only, no inclusions, no special coding, just regular ol’ styling.

Let’s get started!

First, let’s create our DIV element that acts as the overlay. This div won’t be visible until it’s called upon:

<div id=”overlay”>
    This is where you will put your inline HTML for the content inside of the overlay
</div>

Next, let’s create our capsule (that encapsulates the whole page) to act as our “fading effect.”

<div id=”fade”></div>

There’s no content inside because it will only provide the background fading effect to our overlay.

Fantastic! Next, let’s add our styling:

<style type=text/css”>
#overlay {
    display: none; /* ensures it’s invisible until it’s called */
    position: absolute; /* makes the div go into a position that’s absolute to the browser viewing area */
    left: 25%; /* positions the div half way horizontally */
    top: 25%; /* positions the div half way vertically */
    padding: 25px; 
    border: 2px solid black;
    background-color: #ffffff;
    width: 50%;
    height: 50%;
    z-index: 100; /* makes the div the top layer, so it’ll lay on top of the other content */
}
#fade {
    display: none;  /* ensures it’s invisible until it’s called */
    position: absolute;  /* makes the div go into a position that’s absolute to the browser viewing area */
    left: 0%; /* makes the div span all the way across the viewing area */
    top: 0%; /* makes the div span all the way across the viewing area */
    background-color: black;
    -moz-opacity: 0.7; /* makes the div transparent, so you have a cool overlay effect */
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 90; /* makes the div the second most top layer, so it’ll lay on top of everything else EXCEPT for divs with a higher z-index (meaning the #overlay ruleset) */
}
</style>

Now... to create the trigger for the effect: the ability to open and close our “popup.”
Create an anchor tag:

<a 
    onclick="document.getElementById('overlay').style.display='block';document.getElementById('fade').style.display='block'"
    href="javascript:void(0)"Click here to open the overlay
</a>

Looks like a lot going on in the link, but let’s chop it down.

document.getElementById(‘overlay’).style.display=’block’;

What you’re doing here is adding the style of “display=”block” to the DIV that has an ID of ‘overlay.’ By adding this style, we’re triggering the overlay and it’s fading background to show. In the second part of that anchor tag, you’re just repeating the same thing to the ‘fade’ DIV.

Finally, we need a link to close the overlay! Inside of your ‘overlay’ DIV, let’s add another anchor tag:

<a 
    onclick="document.getElementById('overlay').style.display='none';document.getElementById('fade').style.display='none'"
    href="javascript:void(0)"Click here to open the overlay
</a>

This time, all we’re doing is simply changing the “display: block” to “display: none” to make the overlay and it’s background fade disappear!
The final result:
cwolfoverlay.jpg

Was this helpful?