Thursday, February 10, 2011

Best jQuery Modal Box Plugin

These days we see Modal Windows everywhere and they are a great way to present information to our viewers. If jQuery is your JS library choice then you have lots and lots of choices of different jQuery modal box plugins. But, you just need one, a good one, so what is the best jQuery Modal Plugin?

Obviously, opinions will vary here, but I can tell you the top choices, plugins I have used on real production web sites. Many people point to the jQuery UI modal and for good reasons, it has many options and it is part of jQuery UI, so if you are using it, there is no need to load extra javascript. But, I don't personally like it, probably because I rarely use jQuery UI and if you are not using it, then you don't want all that JS for just a modal script.

That is the point, a modal is a pretty simple concept, you really don't even need a jQuery plugin, you could just write it yourself. But, if you are supporting IE browsers and need good cross-browser consistency, then a small modal box plugin is a good idea. But it needs to be small, simple, and well written. And it should also be plug and play right out of the box.

I have seen Facebox used on a couple websites and even though at first it seemed like a great little modal box plugin, now I think it's not that great. Quick plug and play installation (call the script in head and call the modal box function on document load) revealed to me that the close and loading images where not showing up. So, I need to configure the call, which is fine, but the damn thing should just work out of the box.

When looking at the script I realized that those two images where not showing up because the img src tag had a bad url configuration, and even though it is nice that the plugin allows you to neatly configure these urls, I think that such images should be image tags but background images referenced in css and there pointed to the correct image, thus, not needing any configuration.

So, not impressed so far with the way this plugin was put together, but I changed the configuration and I could now see the close image but the loading image was still not showing up. Looking at the code again I realized that there is a problem, the overlay html code (which is part of the facebox javascript) is missing an element

[sourcecode language="html"]
<div class="body">
[/sourcecode]

which is later referenced in the JavaScript. If you were not loading Ajax content into the modal you would have probably not noticed this, but I need Ajax. If you still cannot get Facebox loading image to show up, take a look at these comments. Anyways, this is a good example of a modal box plugin that I want to stay away from, you can easily fix it and configure it, but I want something much better out of the box.

I have looked at a couple other jQuery modal plugins that have been suggested by many people and here is a list of 5 that I found to be almost perfect:

ColorBox - lots of options, images via css background, support for older browsers, well written and often updated.

BlockUI - also lots of options and it has many good examples to look at before using the plugin.

FancyBox - it gives you a really neat Mac-style presentation with a ton of options in its API.

ShadowBox - another well written, highly customizable modal box plugin that supports all major browsers.

NyroModal - this one has a crazy amount of options

The last one, nyroModal, maybe should not have been mentioned, because it has so many options that it is no longer really a simple modal jQuery plugin. However, I have seen it implemented on many popular websites and it is damn powerful, so if you are looking for lots of options, that could be the winner for you.

But I am still looking for something simple yet well customizable and quickly plug and play. For me, the winner is SimpleModal. It has all the options I need, I can make style changes via css, and it is small and works out of the box. I have used it on some big production websites with great results. So, there you go, I think that SimpleModal is the best jQuery Modal Box plugin today.

4 comments:

  1. I really like the overlay jQuery plugin from jQuery Tools and if you are looking for a really simple solution, then check out Light Modal

    ReplyDelete
  2. I think NyroModal takes the cake due to it's ability to scale the modal within the browser window. One of the biggest issues we've had with modals is that the content can appear outside the window in certain situations or on resizing. I'm not aware of any other modals that accomplish this task.

    ReplyDelete
  3. I have used NyroModal and I do like it as well Callaway, but the resizing problem can be taken care of with custom code in any modal.

    ReplyDelete
  4. I have tried the ones you tell here and I agree with you... SimpleModal is light and easy to customize..I've just married with it!!
    Hello from Spain everybody!!!

    ReplyDelete