Add

A CSS3 Overlay System

Note: Demo is Webkit/Chrome only!

Overlays and modal dialogs are immensely popular in modern web applications. The first implementation that rose to popularity was the famous Lightbox, initially intended as a way to show larger previews of thumbnail pictures on a page. Its particularity was that, aside from showing the content in a modal way, the background would be dimmed out to let the user focus on what was being shown.

Ever since then, the pattern has been constantly reinvented and revisited in creative ways. Chances are high that many of the websites (specially web applications) you use everyday have one or more modal dialogs that overlay the content, presenting a new workflow to the user.

Considering the diversity of the existing implementations, this article will try to achieve an overlay system with the following goals and characteristics:

• Provide mechanisms to prevent the user from clicking outside of the dialog. In certain scenarios, you might want the user to focus entirely on what’s being shown and take an action (which might be closing the dialog itself). In others, this might not be a requirement. Both cases have to be supported.
• Centering the dialog vertically is not necessarily a requirement. The CSS has to be flexible enough to support less common, but equally useful implementations.
• Not be invasive. Some JavaScript implementations take an overly invasive approach to the problem, for example recreating the element or cloning it (thus losing the event listeners or id attributes, or risking id duplication).

What are the most common problems of existing implementations?

• They rely on offsetHeight calculation for centering. They have to attach a window resize event listener to reposition and resize (if position: fixed is not leveraged for the overlay background).
• The content of the dialog can grow dynamically (ie: via user interaction, content revealing, Ajax, etc), and the centering will persist without having to call functions or fire events to trigger the recalculation.

What are the advantages of this implementation?

• Positioning is purely CSS based, no offset size calculations, no window resize event listeners.
• The content of the dialog can grow dynamically in height and the vertical alignment will adjust.
• JavaScript job is limited to adding/removing a class (“overlaid”) to the body tag. No frameworks required.
• Animation can be implemented with CSS3 transitions.

How can CSS3 make this task easier?

One of the lesser known and rarely discussed CSS3 features is the Flexible Box Layout (flexbox). Flexbox tries to solve common design problems that the current box model makes very hard to get around.

We leverage this technique for Webkit (although it should also work on Firefox) to solve the positioning problems.

To dim out the content, we use rgba().

Finally, to make sure the user can’t select content in the background, we use -webkit-user-select

Animating

For the second example, we decided to leverage -webkit-transition to animate the modal dialog when the body class overlaid is set. It only takes 3 lines of CSS!

We also make sure to set box-pack to start to show the box at the top:

And as easy as that we have a fancy Mac-style modal dialog that comes from the top, yet maintains all the properties of our other example.

–
Want the best gradebook and lesson plan software on the web? Get your free account!