SpyreStudios - Design and Development Magazine

With new elements of design trending the web it’s no surprise a large portion of these aim towards enhancing the user experience. What better way to help create a more usable environment then to start by properly structuring the way your users interact with key aspects of your websites (i.e. the login process)? This is where the use of Modal Windows steps in.

These child windows help facilitate the connection between the parent application leaving room for a smoother work flow. That’s a pretty good reason to use one, but why else? Let’s find out!

Where to Use Modal Windows?

Modal windows improve the usability of your website by allowing the user to access a variety of areas on your site without having to load any new pages. You can also use them to turnover higher conversions on sign-up forms. For example, DesignReviver has a Questions and Answers community based on Qhub that allows anyone to ask questions without being registered.

However, whenever a user tries to ask a question without being registered a modal window automatically pops-up asking them to sign-up or continue as a guest. Point being that the users who weren’t planning on registering will consider it because of how “all-to-easy” the process seems.

Apart from sign-up forms, you can place your contact form within a modal window. This can be accomplished by setting up a link within your navigation menu (or anywhere else) that will point to a quick and easy contact form once the user clicks on it. Other common uses are log-in forms, alerts/warnings, videos, and photo galleries. All in all, modal windows create a bridge allowing information to move freely between you and your users.

Creating Your Own

Simple Modal ↓

SimpleModal is a lightweight jQuery Plugin which provides a powerful interface for modal dialog development. Think of it as a modal dialog framework. SimpleModal gives you the flexibility to build whatever you can envision, while shielding you from related cross-browser issues inherent with UI development.

ColorBox ↓

ColorBox allows users to create a customized lightbox that is unique to their project. You’ll also be able to promote accessibility, W3C standards, and best practices.

Modalbox ↓

ModalBox is a JavaScript technique for creating modern modal dialogs or even wizards (sequences of dialogs) without using conventional popups and page reloads. It’s inspired by Mac OS X modal dialogs.

Fancybox ↓

FancyBox is a tool for displaying images, html content and multi-media in a Mac-style “lightbox” that floats overtop of a web page.

jQuery Dialog ↓

The jQuery Dialog plugin helps you structure components in a dialog window. You can customize the windows to your specification.

Livepipe UI ↓

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible.

Prototype Window ↓

This class is based on Prototype. The code is inspired by the powerful script.aculo.us library. You can even use all script.aculo.us effects to show and hide windows if you include effects.js file, but it’s not mandatory.

jQuery Alert Dialogs ↓

These methods simulate a true modal dialog box. They will automatically re-position themselves if you resize the browser window (unlike many existing dialog/lightbox-style plugins). If you include the jQuery UI Draggable plugin, the dialogs can be moved by dragging their title bars. Everything you need to produce the dialogs in the demonstration is included in the download. They are completely customizable via CSS (which can make your apps look much more professional)

MochaUI ↓

MochaUI is a web applications user interface library built on the Mootools JavaScript framework. If you take a look at the demo you’ll find an interactive modal window. Take a look at the documentation and the Mocha framework.

Boxy ↓

Boxy is a flexible, Facebook-style dialog box for jQuery with support for dragging and size tweening. It differs from other overlays I’ve seen by providing an object interface to control dialogs after they’ve been created.

What other techniques and plugins do you know of for developing modal windows?

Modal Design Showcase

DesignersCouch ↓

Versions ↓

Design Reviver Answers ↓

Behance Gallery ↓

Nasi Briyani Lounge ↓

Jango ↓

Vewzi ↓

Pixelmator ↓

Build With Me ↓

Zoo Tool ↓

Yorkdale ↓

Mac Heist ↓

Sales Force ↓

Gowalla ↓

Popscreen ↓

Veritocracy ↓

Kiehls ↓

Dishizzle ↓

Cnet ↓

Remix Jobs ↓

GrooveShark ↓

Pixelight Creative ↓

Accept-Ideas ↓

Iceberg ↓

Mail Chimp ↓

Your Turn To Talk

I hope you enjoyed this post and learned a thing or two about modal windows. Please let us know of any other techniques and plugins we might have missed. See you in the comment section ;)