My best 7 free JS modal boxes

I have been working on a new iteration of HOT (follow @hotelotravel for more info) for last few weeks and thought of changing the existing JQuery UI Dialog box for something bit fancy and solid (on other hand I may have just wanted to get a break from usual PHP stuff and to play with JQuery a bit after some time). I did have some popular JS modal box names such as Lightbox, Facebox and Thickbox that I wanted to test and found some few new names on the way.Certainly there will be many more modal boxes out there that I’ve missed and not to mention my requirement will be different from yours, but here is the gist of each modal box in my opinion of those I’ve tested so it may help someone to pick the right one at the right moment.

JQuery UI Dialog

JQUery UI in Hotelotravel

JQUery UI in Hotelotravel

This is the dialog box that I’ve used in most cases and of course it’s great. Few years back when I started working with it I noticed few issues when closing the dialog and such but by now they have all been fixed. Also it’s continuously maintained by JQuery community so you can be sure it is solid. What I like mostly about it is its simplicity as well as customization power through various callbacks when you need more action (you can define what to do when a drag starts, drag stops, box shows up, box closes. etc) through various option settings.

This is all you have to do to get a simple dialog box if you have a div with the id of “myDialog”.

$("div#myDialog").dialog();

Another perk of this modal box is its file size, which is quite small (about 10KB and minimized version is about 6KB) and when doing a complex site with numerous CSS and JS scripts, size of each file becomes crucial to maintain a small load size to reduce the load time as well as save server bandwidth. Only seemingly downside of this box is that it doesn’t come with any fancy preloaded stuff (themes, effects, preload-images.etc) but for someone interested (and with a bit of JS and CSS knowledge) can customize them.

LightBox

Light box

Light box

This is focused mainly on presenting pictures and does a good job at it. If you are interested in creating something like a picture gallery without touching much JS, this could be the ideal JQuery plugin for you. Also it has a relatively low size with a size around 19KB and packed version is about 6KB. But since I was looking for something more with raw customization power, this wasn’t the choice for me.

FaceBox

Facebox

Facebox

Another popular choice for a modal boxes and it deserves the name. It has a very small file size and a simple code. It also comes with a default theme and can be a convenient choice for hasty tasks or people :P But the downside I noticed is that it gives very small customizing power to the user through JQuery code (which is the case with Light box also btw).

It’s simple to a fault and you just have to name the class name of the link you are going to pop the box as “facebox”. It could have had few more options such as to define the basepath of the project as I couldn’t find a way to define it for pre-loading images without hacking the code nor a way to give width and height manually or pass callbacks. Also this project seems to have been abandoned for a while now and if you are considering adapting this box for your whole site check it thoroughly.

ThickBox

ThickBox 3.1

ThickBox 3.1

ThickBox is really a cool JS box. It’s simplicity and extremely small file size makes it very adorable. This modal box gives some customizing power but still focuses mainly on simplicity and link naming as “thickbox” which is its magic word. However as mentioned earlier this has a better customizing power through JS than FaceBox or LightBox so it’s more flexible. With some hacking you can also give your own callbacks and options as you like.

LightWindow

LightWindow

LightWindow

This is an all purpose, very fancy looking modal box done using script.aculo.us and prototype libraries. It can host all kind of media types and even flash clips which is really impressive. But the obvious downside is its huge file size of about 60KB which is a huge amount when considering this will be just a small part of Hotelotravel.com and for general use it’s not tolerable IMHO. It is not compressed or packed by default so you can manually minimize it using something like YUI compresser to bring it to somewhere around 30KB but even then it’s too large for me. But this is ideal for a site that has tons of ajax stuff and in need of a very customizable modal box with lot of options and callbacks that can be used throughout the site.

SimpleModal

SimpleModal

SimpleModal

This is the smallest JQuery modal box I’ve seen and if you need to customize your modal box to the extreme I’d suggest this. Downside is that you will have to write a lot to get something done through this modal box but extreme small size complements that.

NyroModal

NyroModal

NyroModal

This is also a very good looking JQuery based modal box with a reasonable file size(about 14KB for packed version) and gives considerable customizing power to the user. Also it comes with a packed theme and all that so you can use it easily without much coding which is a plus. In fact, I had some trouble deciding whether to use this one or JQuery UI for my task but finally settled on using JQuery UI because my familiarity with it and community backing. So I guess in my case JQuery UI is the rightful winner :)
[digg=http://digg.com/programming/Best_7_free_JS_model_boxes]

Tagged , ,

10 thoughts on “My best 7 free JS modal boxes

  1. Andre says:

    “Few years back when I started working with it”

    I thought jQuery UI didn’t even exist, few years back.

  2. Laknath says:

    @Andre I really don’t remember the time. It could be a year or two at most I guess. I don’t keep diaries :)

  3. yasith says:

    well… take a look at extJS. you’ll love it! :)

  4. Thank you for putting together this list. And I’m glad you like the jQuery UI Dialog. Re:

    “Only seemingly downside of this box is that it doesn’t come with any fancy preloaded stuff (themes, effects, preload-images.etc)”

    Take a look at ThemeRoller ( http://themeroller.com/ ) for custom theming, of not only dialog, but all jQuery UI controls. Also, any jQuery UI Effects, or really any custom jQuery effects can be used for Dialog show and hide. If you have any ideas on how it could be further improved, we welcome feedback on our Dev and Planning wiki:

    http://wiki.jqueryui.com/Dialog

    Thanks.

  5. Eric Martin says:

    Nice write-up Laknath!

    Thanks for mentioning SimpleModal. You summed it up pretty well – its main purpose is to provide a lightweight modal dialog foundation. I wanted to create something that allowed the developer to use their imagination to build anything on top of it, without any restrictions.

    I agree with your final choice though, jQuery UI Dialog is great!

  6. Laknath says:

    @yasith Thanks man. I like extJS but since it’s more of a library that’s suited for many tasks (and IMHO, best feature is table like data management than a modal box) I didn’t include it here. Even though JQuery UI also a library I only meant JQuery UI modal box here in case I sound hypocritical.

    @Richard Thanks for helping maintain the wonderful library, It’s almost as useful as jquery core.
    What I meant from my short review is that it’d be good to give an inbuilt option to define a preloader image with modal box options (something like FaceBox) that will go with the overlay. I’m sorry about forgetting to mention about ThemeRoller which makes JQuery UI components more cooler :)

    @Eric Thanks for the great Modal box. It really is very cute and handy :) Please contribute choosing JQuery UI to my laziness.

  7. Glen says:

    In the middle searching old friends, found your website.Just passing by.By the way, your website have great content! :)

    _______________________________
    Don’t pay for your electricity any longer…
    Instead, the power company will pay YOU!

  8. pradeep says:

    Great job! and GREAT contribution to the jquery community!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>