Up until I read the book on webdesign I reviewed a couple of weeks ago, I had no idea what to call those new pop-up windows that dim the screen behind them so you have to deal with them before you can get back to browsing. Through that book, I learned that they are called “modal windows,” and I was intrigued. I did some research on them, and I found that they are kind of all the rage these days in webdesign.

But what constitutes a modal window, and when should you use them? And, most importantly, when shouldn’t you use them?

Modal Windows: Basically, The Internet Version of a Dialog Box

According to the Wikipedia entry on modal windows, a modal window is any small pop-up box (or “child window”) that a user must interact with before they can carry on with their normal browsing of a website.

You have likely seen these kinds of windows on modern websites before. They can be used to alert users to something they need to fix on a form, allow users to sign up or log in, or to display a gallery of videos or images in larger format. (Most often, I’ve seen them used to report updates to a site, or to advertise a site’s newsletter, social media links, etc.)

How to Make Modal Windows

There are two main ways to create a modal window for your website; WebDesignerDepot shows the HTML5 and CSS3 method, while Queness.com shows the jQuery method. Both are perfectly valid, though the Queness example requires more detailed Javascript/jQuery code knowledge, and the WDD example is on the bleeding edge of code standards at the moment.

Alternatively, you can have a modal window coded for you; here’s a DHTML modal window script/plugin from DynamicDrive, and here’s the TinyBox Javascript modal window script.

When Should You Implement Modal Windows In Your Designs?

According to Smashing Magazine’s article on modal windows, a modal window is great for signup and login forms, as well as site alerts (such as a form being improperly filled out), and enlarged display of images or videos. All of these site functions don’t necessarily need a separate webpage, as this article’s author points out, and so putting the information on an appearing and disappearing window can declutter your page. (Additionally, using modal windows for search functionality is presented as an idea.)

I would add that modal windows could be used quite effectively as part of an online teaching system, i.e., making a one-question-per-window question & answer test, which requires the user to type in an answer and submit it before moving on to the next question, without leaving the screen you’re on. Also, modal windows could be helpful with visual or auditory assistance settings on a webpage, such as increasing font size, adjusting visual contrast, translating the text to another language, or allowing the text to be read aloud.

When Should You Choose Not to Use Modal Windows?

As both the referenced Wikipedia article and the Smashing Magazine article point out, modal windows have faced a good bit of criticism for blocking regular browsing. I know I find it annoying when I’m just surfing along, minding my own business, and then the page suddenly goes dark except for a little window in the middle of the screen that begs for my attention. (That’s one reason I drafted the post about intrusive page alerts.)

The general consensus seems to be that unless your information is absolutely critical to the user, there should not be an unexpected pop-up on your page. (Those of us who came of age in the “drive-by spyware download” age of popups are especially trained to hit the “X” button on any popup they see, so restricting the amount of popups on your page is a good thing.) Thus, modal windows would best be used in user-generated events, such as a user clicking on a “signup/login” link, or a user clicking to “Enlarge Image” or “View Video”, etc.

I would add also that if you’re building a mobile version of your site, you’ll probably want to avoid modal windows on the mobile version. When I’m browsing the Internet on my iPhone, I notice that modal windows either don’t open properly or don’t dismiss properly. (It might be just my big fat fingertips, but I’d wager I’m not the only Internet user with that problem! LOL!)

Summary

While not as annoying as the traditional “popup window,” modal windows should still be used with care; it’s easy to go overboard and risk your users avoiding your site because of all the screen-darkening dialog boxes. However, when properly implemented, they can make site processes easier on you, the designer, as well as sleeker and quicker for the user–a win-win!