February 16, 2009
28 Comments

10 best modal boxes for web design projects

Posted in Development by Gergely Marton

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.

2jqueryuijQuery 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.

10nyromodal

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.

1fancyboxFancyBox

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!

3lightbox2Lightbox 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.

6jqmodaljqModal

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.

5modalbox

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.

4moodalboxMOOdalBox

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.

7simplemodal

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…

9faceboxFaceBox

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.

8thickboxThickBox

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!

Related Entries

Signup for our awesome Newsletter!

We will try to send you e-mail that will open your eyes in the morning and wake you up in the evening!

About the author

Gergely Marton, 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.

  • http://www.exception.pl/ mleszczynski

    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.

  • Richard

    “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.

  • http://www.webgurusdesignblog.com Gergely Márton

    well Richard…fancybox is my personal favorite too. It has a few bugs, but it’s the coolest. Thanks for your comment.

  • http://www.jm-experts.com Jm-Experts

    what is this! are you kiddin me!

  • robdeluxe

    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

  • http://www.aocgoldweb.com aoc gold

    This is a great article. I’m new to blogging but still learning. Thanks for the great resource.

  • http://www.ibay24.com metin2 yang

    metin2 yang\
    metin2 yang
    metin2 yang

  • http://www.buywydgold.com buy With Your Destiny gold

    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.

  • Clive Stewarts

    Another suggestion: Likno Web Modal Windows Builder:

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

  • http://www.lowest-rate-loans.com GibsonJanette34

    People in the world receive the business loans in different creditors, just because that’s simple and comfortable.

  • http://www.guitarreference.com/power_chords.htm guitar power chords chart

    Thank you for sharing the information with us.

  • http://www.youtube.com/watch?v=a4s5VbMbiF4 jackpotcity casino

    I see a lot of good articles here, what template do you use ?

  • http://earnforuploading.blogspot.com/2010/04/laser-hair-removal-nyc.html laser hair removal nyc

    Excellent post i am sure that i will come back here soon

  • http://www.youtube.com/watch?v=jx3iKMCDosc unlock iPhone 3G

    I want to subscribe to your blog, do you have newsletter ?

  • http://www.youtube.com/watch?v=PPNpsBnF0NQ make money online

    You made some good points here.Keep us posting. What template do you use in your website

  • http://www.youtube.com/watch?v=nxtSGgtR3Hs no deposit bingo

    I came across your blog, i think your blog is cool, keep us posting.

  • http://randkisexzone.blogspot.com randki internet

    Just want to tell you that your www content is interesting, but you must improve site graphics

  • http://www.articlewisdom.com/Article/Online-Casino-Red-Book---Best-Online-Casino-Ranking---Guide/352841 Manual Fein

    I admit, I have not been on this webpage in a long time… however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues.

  • http://www.yoursite66776.com Corrin Dettmering

    Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! I’m sure you had fun writing this article.

  • http://digitalsportsphotographys.com Digital Sports Photography

    I recently come across your weblog and think this is a great post i enjoy reading and provide me some great information for that concern. Thanx for this great read.

  • http://www.turkuaztasarim.com ctaskin

    perfect! Thanks for your sharing. Love You web gurus :)

  • http://ladiesmall.wetpaint.com plus size fashion

    Hello there.. I am quite new to blogging world and I been doing some research to get some ideas. Your wordpress blog definitely has given me some inspiration. Thanks a lot for that!

  • http://www.kidslikecoloringpages.com/category/princess/ Coloring Pages

    I enjoyed this. Do you have a RSS feed?

  • http://www.allaboutbachelorette.com Bachelorette Party Ideas

    I personally like to use Dojo for my modal boxes.

  • http://www.youtube.com/watch?v=a4s5VbMbiF4 casino online bonus

    Do you think that this cms is good for my first website ?

  • http://www.webdesigner.co.in Kate Brown

    real nice designs. Excellent work.

  • http://www.cooprico.com.ar Ariel

    Nice man, keep posting

  • http://www.smecsinfotech.com Mark

    Thanks a lot buddy, you saved me quite a lot of time. Keep up the good work