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