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 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.
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 ↓
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)
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
Design Reviver Answers ↓
Behance Gallery ↓
Nasi Briyani Lounge ↓
Build With Me ↓
Zoo Tool ↓
Mac Heist ↓
Sales Force ↓
Remix Jobs ↓
Pixelight Creative ↓
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 😉
Author: Joel Reyes
Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.
Coding and gaming go hand-in-hand, though that doesn’t mean coders are always gamers and v…