10 best modal boxes for web design projects

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!

• A list of jQuery interface elements and plugins developed by Eyecon
• 5 jQuery UI Dreamweaver extensions you can use to simplify your everyday work
• Mootools Slider With Range Indicator (two knobs)
• Supersized – Full Screen Background/Slideshow jQuery Plugin by buildinternet.com
• jQuery Image Preview – New Plugin “imgPreview”