Hot on the heels of (and sometimes built upon) incredibly useful Javascript libraries like Scriptaculous, there’s been a wave of modal overlay effects.  (Some of the most popular are listed here.)  They all seem to have their own unique quirks, but the overlying theme is the same.  A small layer is given attention by bringing it to the front and graying out everything behind it.  Functionally it accomplishes some of the same things as a popup window without needing to open a separate window.

Not everyone is a fan of the modal overlay, but for the most part the web design community seems to be embracing them.  [azarask.in via 37signals]  They definitely add to the elusive cool factor of a website without a great deal of programming work required.  You simply download one of the libraries and configure it.

If cool was all that was provided, I’m not sure I would really like them.  I really dig them, though, because I consider them to be a UI upgrade.  It’s important when designing a website to clearly communicate to the visitor what they should be focusing on and how they can interact with it.  Modals are a perfect fit for this.  Graying out the background information makes it immediately obvious where the action is.

filed under: Web Development