Andre on Tech: Lightbox for Modal Dialogs Redux

Since I last posted on Lightbox for modal dialogs in May, some additional relevant projects have sprung up. This is a roundup of more Lightbox-type modal dialog options. As you go about choosing the perfect script for your needs, Here are some questions to keep in mind:

What's your content? Do you need to just display images? Or arbitrary HTML? Many scripts support both, and some are tailored around displaying images very easily.
Is your content remote? You may need to retrieve your content from the server, or the content may already be rendered on the page in a hidden div. I actually find the second case the more common one -- the dialog content is already loaded on the page, and I just want to reveal it in a modal window.
What are your bandwidth requirements? These scripts vary quite a bit in size. If you're building an internal application you can get away with a bulkier script, but otherwise you might want to look for one of the leaner ones.
How important is look-and-feel? Some of these scripts offer a slick and customizable look, and others are more spartan. I appreciate the nice looking options, but usually end up using the scripts with less flourish. Your needs may be different.
What JS Library are you using? Prototype? Moo.fx? Dojo? jQuery? Your choice may narrow the field for modal scripts, since you typically will not include another whole JS library just for the modal dialog functionality.

The Scripts

	iBox iBox covers the three main cases for modal dialogs: images, inline content, and AJAX-loaded content. The result for all three is attractive and functional. iBox is also quite small (11K), and doesn't depend on any external JS libraries. As an added bonus, iBox supports graceful degradation for browsers with JavaScript disabled (i.e., it will simply link to a new page with the content). The gist: A versatile and lightweight script without external dependencies. The footprint: Small -- just 11K, and doesn't require any libraries. The verdict: A good choice if you aren't using any libraries, or want the flexibility to switch between JS libraries later in your project. Probably also fitting if you use different JS libraries for different projects, and only want to learn one JS modal dialog package. I think the graceful degradation is nice, but non-essential for many applications since so many sites require JavaScript to function properly.
	Seth Banks' subModal subModal has been around for a while -- it actually pre-dates the Lightbox craze, and is the product of Seth's work from when AJAX was called DHTML. Submodal does just one thing -- load external content and display it in a modal dialog -- and it does it reasonably well. It's a bit clunky in its implementation however, as it requires multiple JS files and extra markup on your page. Note also that each time a submodal window opens, your browser history gets an extra item. This is a product of the iFrame usage, and may or may not be your desired behavior. The gist: an old-school modal dialog implementation, restricted to loading external content in an iFrame. The footprint: Lightweight, about 10K spread over two JS files. No external dependencies. The verdict: If you're attracted to subModal's aesthetic, check out the similar but improved implementation offered by Todd Huss -- details are below. Otherwise, go for iBox above, which also has no external dependencies, but offers more functionality.
	Todd Huss' subModal enhancements Todd has taken Seth's subModal work (see above) and made a few key enhancements. First, it's unobtrusive -- you can make any HREF into a modal window just by adding a class to the anchor tag, and you no longer need to add special markup to your page to utilize the script. Second, it's consolidated and compressed -- the script lives in just one .js file, and that file has been compressed to just over 4K using Dean Edward's Packer tool. The underlying architecture of the modal dialog is still the same -- it uses a iFrame to load external content, and it still adds a history entry for each modal that is displayed. The gist: A small and functional modal dialog. Limited to loading external content. The footprint: Nice and light! Just over 4K and doesn't need any libraries. The verdict: If 1) you only need external content (i.e., don't need a modal to display content that's already on your page but hidden); 2) you want an iFrame solution; 3) you don't want to be distracted by a lot of options -- this may be just what you need.
	Prototype window Prototype window is a general-purpose JavaScript windowing system which also happens to support modal dialogs. It offers an impressive array of styles and effects out-of-the-box. As the name implies, it is dependant on the Prototype JavaScript library. You can utilize Scriptaculous effects to show/hide your windows (for example, fading in windows). This looks great in demos, but in practice quick response is almost always preferable to fancy transition effects. Some positives for this script: 1) it's pretty -- check out the dropshadow style; 2) it's very well documented; 3) it includes multiple styles to choose from, and instructions for creating additional styles; 4) it includes a cookie-based system to remember windows' positions (nice, but not applicable if you're using it for modals). The gist: a general-purpose Prototype-based windowing system which happens to support modal dialogs. The footprint: 39KB of JS, plus 54KB of Prototype and 33KB if Scriptaculous if you want the nifty effects. The verdict: Too heavy for mere modal dialog usage, especially with so many other options available. However, if you need a slick-looking general-purpose windowing library and don't mind the footprint, this is your best bet.
	Lightbox v2.0 The original work by Lokesh Dhakar. Allows pictures and sequences of pictures, not arbitrary HTML. Very slick animation effects if you are open to the heavy prototype+scriptaculous download. The animation and overall polish of the out-of-the-box presentation gives Lightbox the biggest "wow" factor of the three. The gist: a smooth and clean image-only popup, optimized around displaying images as easily as possible. Has built in flickr-like next/previous functionality. The footprint: Requires 100K or so of prototype and scriptaculous The verdict: A good choice if you know bandwidth is not a problem, and you want the popup that is most tailored for use with images.
	Greybox Greybox allows arbitrary content instead of just pictures. There are two versions: the original, by Amir Salihefendic, and Greybox Redux created by John Resig, author of jQuery. The advantage of John's version is that it the code footprint is quite small -- just 1.2K on top of the jQuery library, which is about 10K. If you are already using jQuery, then John's version is the clear choice. It also fixes a back button bug in the original. This is the only one which uses an iFrame, so you can show a completely separate document inside the popup. The gist: a popup which allows arbitrary html, forms, even other websites iframed in a lightweight package The footprint: The jQuery version is only 1.2K on top of a 15K jQuery library The verdict: A good choice if you are already using jQuery and need something as lightweight as possible, or if you need to iFrame content.
	Thickbox Thickbox is written by Cody Lindley, and is built on top of jQuery. Thickbox has the advantages of both versatility (images and html) and relatively light weight (20K including jQuery). Part of Cody's motivation was a generalizable custom dialog box, and Thickbox fits the bill well. Thickbox's footprint is not quite as small as John's Graybox, but still much smaller than Lightbox. New in version 1.2: The ability to use inline div elements to populate a ThickBox. The new version also utilizes jQuery 1.0 alpha, which as of this writing (7/9/06) is still stabilizing on its way to 1.0. The gist: versatile -- easy usage for pictures alone, or arbitrary HTML. Doesn't use iFrames. The footprint: about 20K including the jQuery library The verdict: out-of-the-box more visually appealing than Greybox, and easy photo handling like lightbox -- the good overall choice if you don't need Lightbox's sequencing functionality, especially if you are already using jQuery.

Next: GZoom drag-to-zoom Google Maps control »

Comments

AhmedF on Jul 10

Nice post, good to see an explanation on all of them.

Todd Huss on Jul 10

Awesome roundup Andre! When I was looking for a solution I remember spending a few hours googling just to put together the list of candidates so I'm sure this will be a big help for people just getting into modal dialogs!

Derek Haynes on Jul 10

Great review Andre! I was struggling with a hacked-up version of Lightbox Gone-Wild for a while, and it looks like there are much better alternatives now.

Andreika on Jul 13

You can also add my attempt to your review: http://okonet.ru/projects/modalbox/

Thanks!

Jack Turner on Sep 02

And there is the excellent Litebox which uses moo.fx to emulate the behavior of Lightbox 2.0 in 24K or less.

Rich on Sep 06

I've just discovered Redbox (yet another alternative)...

http://richtextblog.blogspot.com/2007/09/redbox-rules.html

Mikel Maron on Sep 23

Hey Andre -- Have you had success with using any of these as containers for a GMaps API map? I need a google map with markers to appear within a lightbox..

I've tried both Leightbox and iBox, and both have some problems.

Andre Lewis on Sep 23

Hey Mikel - I haven't put GMaps in a lightbox, but I know I've seen it someplace -- maybe Zooomr. Let me know when you find the right mix, I'm sure I'll want to do that at some point.