jQuery & Modal Windows for Ecommerce Design

As a consumer zeroes in on the product she wants to buy, she'll look for more specific product details, reviews, and images. She wants to put distractions aside and make a good buying decision.

When you are designing or developing a user experience for these sorts of buying situations, it may be helpful to use a modal window to focus the shopper's attention on a product image or particular step in the checkout process.

What Are Modal Windows?

In user interface design, a modal window, which is sometimes called a modal dialog box, changes how the user can interact with the web page—effectively changing modes—and interrupting the regular page or work flow.  Modal windows focus all of the users attention on a single, often new, section of the page while typically hiding or "graying" out the rest of the page content.

In more technical terms, a modal window is a child element that usurps control of and interaction with the parent element (window) until the user takes some action or closes the modal window.

For example, the image below shows a product detail page on Macy's website. Notice the "Larger image" button below the product photograph.

Selecting the "Larger image" button opens a modal window and shows the shopper a higher resolution version of the product photograph. When the modal window is open the parent element (essentially the rest of the HTML document) is not emphasized, in fact, it is almost "bleached out." Before the shopper can continue, she must interact with the modal window.

Why Use a Modal Window?

Modal windows are useful (1) when a shopper wants to focus on a particular item or detail, like in the Macy's example above or (2) when the site designer needs a shopper to focus on a particular item or detail, like during the checkout process.

By way of comparison, if a designer chooses to use a new browser window or pop-up to display the product image, the user could ignore it and continue interacting with the parent element or window.

Modal windows are also not subject to pop-up blockers, which, depending on browser settings, might have prevented a new browser window from opening.

Modal windows also allow for better branding and style control than opening a new browser window, which will have at least some of the browser's header.

More Examples of Modal Windows

To give you a better idea of how online retailers are using modal windows, let's take a look at several examples.

LLBean's product detail pages offer shoppers a "Quick View" of product specifics.

Selecting the "Quick View" option opens a modal window with a larger product image, a bulleted list of key product features, color choices, and an "Add to Bag" button.

Backcountry uses a modal window to offer larger product images, in a fashion similar to how Macy's managed larger product photographs.

Orvis uses a nearly identical approach for showing off larger product images on its website. But Orvis, which in the example below has four product images, includes a next or previous button so that shoppers can page through the pictures without leaving the modal window.

Sky Sectionals, one of the Internet's leading purveyors of aviation chart downloads, uses two modal windows for its checkout process. The first modal window opens to show the shopper what is in his cart.

Once the shopper selects "Buy Sectional," a second modal window opens and further "grays out" the parent window.

Art.com, uses Adobe Flash and a modal window to help shoppers imagine what a particular print might look like hanging on the wall.

How to Implement Modal Windows

Modal windows are typically created using JavaScript, which is the primary client-side scripting language for the Internet.

It is, of course, possible to write a JavaScript to open a modal window completely from scratch. For some specialized uses, particularly when file size is a concern, this could be the best approach. But generally, you can build on the foundation of a JavaScript library, like jQuery, and one of several modal window scripts, which have been made available.

Personally, I have used ThickBox 3.1 for several years to create modal windows in my projects. But recently its author, Cody Lindley, has stopped supporting it, rather, encouraging folks to try one of several other excellent modal window scripts.

Here are several modal window solutions that rely on the jQuery JavaScript Library.

ColorBox

ColorBox was created by designer and developer Jack Moore. This modal window script is just 9k, has many built in features and options, and is very attractive. In my opinion, it is best for site designers with some jQuery experience. ColorBox is offered under a free MIT license.

ColorBox can have many different looks.

Shadowbox

Shadowbox is another excellent modal window solution that relies on JavaScript and CSS. In particular, Shadowbox works in all browsers, uses valid HTML markup, and supports text, images, Flash, QuickTime, and Windows Media content. A single developer's license is $20.

Fancybox

Very easy to integrate, the Fancybox modal window solutions even offers a mouse wheel plugin, which allows users to step through several  images. Fancybox is offered under both MIT and GPL licenses.

jQuery UI Dialog Box

jQuery UI even offers a modal window solution that is typically aimed at including text. This widget has the advantage of working with any of the jQuery UI skins, so if you are already making use of jQuery UI in your site design, you can easily extend the skin (brand) to your modal windows.

Whichever solution you select, modal windows are a popular and effective kind of user interface.

This post was contributed by our guest columnist Armando Roggio. Armando is a journalist, web designer, technologist and the site director for Ecommerce Developer.