Create A Modal Dialog Using CSS and JavaScript

Create a Modal Dialog Using CSS and JavaScript
Back in my early programming days, before I

switched over to web development, I spent most of my time writing software for Windows. I
look back on that time with fond memories. 8-bit icons, OLE2, and no silly Start menus.
With the recent Web 2.0 boom, many web developers have returned to their roots and
begun building sites that resemble desktop applications. AJAX (the second coming of
javascript) lets designers borrow elements from the desktop paradigm and use them on
their websites.
One element that I find myself using quite a bit are modal dialogs. In a desktop application,
a modal dialog is a box or message that forces you to dismiss it before you can use any other
part of the program. When used sparingly, it can be a great way to direct the users
attention to a specific element and force them to make a decision. With a little CSS and
Javascript we can accomplish this same effect on the web.
Measure the impact of your design changes on your sites performance with SERP
Tracking and Google Analytics integration. Sign up for a free 30 day trial of Raven Tools and
get started in 15 minutes.
The code behind this effect is surprisingly simple. There are three pieces involved:
A <div> containing the content you want to appear when the modal area is
activated.
Two CSS rules which keep the layer hidden until needed and then fullscreen when
activated.
Javascript which hides and shows the <div>.
The overlay <div>

At the bottom of your HTML, create a <div> with id = overlay. Any content placed inside
this area will initially be hidden by the browser and then shown modally when activated.
Any content beneath it will be unclickable by the user, which forces them to interact with
whatever message you give them.
Inside #overlay I usually place another <div> which I center horizontally and apply a few
styles to create a dialog box appearance. Its this second <div> that actually contains the
content Im showing the user.
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
The CSS
Theres only one CSS rule to take care of the fullscreen/hiding for #overlay.
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
You can style the inner <div> however you like. As I said above, I usually center it
horizontally to give it more of a dialog box look and feel.
#overlay div {
width:300px;
margin: 100px auto;
background-color: #fff;
border:1px solid #000;
padding:15px;
text-align:center;
}
The Javascript
The javascript that controls everything is insanely simple. Just add the following function to
wherever youre storing your javascript. (That could be in the <head> of your document or
in an external .js file.)
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
The javascript grabs our overlay element and then toggles its visibility property. If its
hidden, it makes it visible and vice versa. You could create a function to explicitly show or
hide the layer, but I prefer this automatic toggle method since it requires less code.
With the function in place, we then call it whenever we want to show the overlay and then
again to hide it. So, somewhere on our page we could add
<a href='#' onclick='overlay()'>Click here to show the overlay</a>
When the user clicks on the link our javascript will show the overlay.
Within the overlays HTML, we need to add a link to hide it. The code is exactly the same:
Click here to [<a href='#' onclick='overlay()'>close</a>]
Finishing Touches
When the user clicks the link to show the overlay, they may become confused since it looks
like they can still click on any element in the page. To help them understand whats going
on, we can apply a background image to the overlay <div>. In Photoshop I create a simple
checkerboard pattern .png with transparency. This creates a shaded effect so the user can
still see the underlying web page but know not to click on it. To add the background to the
layer, add the following to our CSS.
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background-image:url(background-trans.png);
}
And finally, (as always) we need to add a small tweak so that this works in Internet Explorer.
Fortunately, its quick fix. Add this to your CSS.
body {
height:100%;
margin:0;
padding:0;
}
In order for an element to have a percentage height applied to it (which #overlay does), IE
requires the parent element to have a height. So, just set bodys height to 100% and zero
the margins and were all set!
Update:
Reader Henrik Binggl commented that this technique doesnt work on form elements in IE6.
I did some digging and found an article on MSDN that explains the problem, which, as it
turns out, only applies to <select> elements not all form elements. In short, they are
rendered as a seperate window by IE which floats above all other page content regardless of
their z-index. There is a workaround, but its complicated and messy. The Microsoft page
recommends waiting as the problem has been fixed in IE7.

Create A Modal Dialog Using CSS and JavaScript

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create A Modal Dialog Using CSS and JavaScript

Uploaded by

Copyright:

Available Formats

Create a Modal Dialog Using CSS and JavaScript

Back in my early programming days, before I

Javascript which hides and shows the <div>.

The overlay <div>

You might also like