February 16, 2009

10 best modal boxes for web design projects

Posted in Development by Gergely Marton | Tags: interface, JavaScript, List

I have noticed that every time we, the web developers, need a modal window, alert box or a full-size image preview for one of your projects it drives you crazy until you find one that suits your requirements. You have a bunch of modals to choose from, but either it can be customized or it can do what you want it to do, so I came up with a list of 10 best modal boxes for you to choose from. Any of these can be used mostly the same way, but each of them are unique regarding their functions. I hope you will find this list useful and you will bookmark it to have it at your click when you need it.

jQuery UI Dialog

JQuery UI Dialog is part of the jQuery UI which is a complete bundle of effects and plugins built on jQuery. It is customizable via css and can be implemented in any project without restrictions. You can use this dialog box in five different forms: basic dialog, modal dialog, modal message, modal confirmation, modal form.

NyroModal

NyroModal is a jQuery plugin and it is highly customizable. It has the ability to define many callbacks at different time in the process to allow you to edit the settings, the data or do whatever you need. It has error handling also and a nice function that I loved was to call _blank targeted iframes.

FancyBox

FancyBox is another jQuery plugin with nice easing and resize effects. This guy wanted something fresh and Mac-like so he created a plugin that delivers this ideea and style. It can group images in galleries and has a nice easeOutBack effect when closing the modal window. Check it out, it is simple and fancy!

Lightbox 2

Lightbox2 is the good-old modal window script which revolutionized the image galleries and image previews. This script has the most imitations and copies ever. It is still a nice modalbox to use in simple HTML projects where the client’s needs are basic and the photo galleries only need a little pepper.

jqModal

jqModal is a plugin for jQuery to help you display notices, dialogs, and modal windows in a web browser. It is flexible and tiny, and makes a great base as a general purpose windowing framework. It can be customized and it can act as a dialog, notice, modalbox, confirm-box, iframe-box or it can even display inline divs in modal windows.

ModalBox

ModalBox is built on prototype and script.aculo.us and it is a flexible and customizable. Features include ajax page loading, offline-mode, callbacks, automatic height adjustment, scrolling-mode. This modal has Keystroke support which can be a nice functionality in any web 2.0 app you will build.

MOOdalBox

MOOdalBox is a modal box (inline popup), used to display remote content loaded using AJAX, web 2.0 style, written for the mootools framework. It can be used to display some help document, an extra options page, a registration form, etc. It eliminates the need of classic popup windows, that may get blocked by popup blockers.

SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. It has a nice drill down effect example with form content, people should learn about interface design from this guy. Used it, loved it! Try it yourself…

FaceBox

FaceBox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. It has “extra-classes” feature which enables you to set an extra class to your trigger code which will apply to your div/text/iframe in your modal box. If you ever need to re-create a Facebook-style modal window, this is your best option.

ThickBox

ThickBox’s function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal. This was the first modalbox script built upon jQuery and realeased to the public. It is powerful and it can help you on those cloudy days.

If you liked this list please leave a comment or subscribe to our feed! Thanks!

Author: Gergely Marton (20 Articles)

Marton Gergely is a self-tought web designer and developer with over seven years of experience. He owns his own little web design agency WebGurus, and runs this blog in his spare time. Usually the work gets more important for him than anything else, but he struggles to get some time to read and to play his violin.

9 Comments to “10 best modal boxes for web design projects”

March 5, 2009 at 3:07 pm
mleszczynski says:

Hi. I’ve switched recently to shadowbox. It’s highly configurable and customizable. It can run on jQuery, Prototype, and few other frameworks. But it’s not free.
March 28, 2009 at 12:35 pm
Richard says:

“oh my…you made it to the bottom! now you have to leave a comment!” – hehe, you’re right, that comment left me no choice! =O)

Great list and comparison. It’s hard to chose from the alternatives but I like FancyBox because it looks nice. Facebox isn’t bloated though which I like.
March 28, 2009 at 4:03 pm
Gergely Márton says:

well Richard…fancybox is my personal favorite too. It has a few bugs, but it’s the coolest. Thanks for your comment.
July 23, 2009 at 3:06 pm
Jm-Experts says:

what is this! are you kiddin me!
August 4, 2009 at 4:57 pm
robdeluxe says:

Hi, I want to use something like this on a small website that I am creating. The main page is going to show a number of thumbnails and when clicked I’d like a modal/lightbox to be shown with an image and other content populated from a database. I’d then like the user to be able to click next/back to navigate to the next image/content in the database (or close the modal and return to the main thumbnails page). Is this possible to do with any of these modal methods? Do you know of any others that would suit? I am very new to web dev so I hope it isn’t a stupid question!

Thanks
August 13, 2009 at 5:56 am
aoc gold says:

This is a great article. I’m new to blogging but still learning. Thanks for the great resource.
November 4, 2009 at 11:02 am
metin2 yang says:

metin2 yang\
metin2 yang
metin2 yang
January 6, 2010 at 5:38 am
buy With Your Destiny gold says:

You should know With Your Destiny gold, or wyd gold if you play this game. I can say so: each gamer want to buy With Your Destiny gold and buy wyd gold to promote their character level easily, more cheap wyd gold they own, more items they can buy in game.
February 26, 2010 at 3:50 pm
Clive Stewarts says:

Another suggestion: Likno Web Modal Windows Builder:

http://www.likno.com/jquery-modal-windows/index.php