How do jQuery modal box plugins compare?

views:

307

answers:

How do jQuery modal box plugins compare?

There is a huge number of jQuery modal box plugins out there. Jitter lists 20 of them in this response (http://stackoverflow.com/questions/1656086/modal-windows-plugin-to-rails#1656105).

Which one do you use and why? If you use different ones in different cases, how can they be broken down categorically by use-case?

+2 A:

I pick what I want based on its primary use. The fact that you can use a lightbox variant to show a dialog box, doesn't make it a good candidate in my mind.

Generally if I need to show photos or another iframed web page, I use a lightbox variant. Two that we have used at our studio and been happy with are:

Slimbox 2 (Just photos)
Colorbox (Pretty much any type of content)

For dialog type behavior, I highly recommend using jQuery UI's dialog. It is in active development, and is super customizable.

[rant] Whatever you do please don't use SimpleModal unless you need its special type of callbacks. Otherwise, when you try to hook into an onClose callback, you'll find yourself having to perform the actual closing of the box. Just my two cents on that one. :) I just know it has come up a few times here in SO, and it just feels awkward to use IMO [/rant]

Doug Neiner 2010-01-29 02:26:49

Great analysis. Thanks! What about forms? Does that fall under iframed website or a dialog box in your mind? For example a form that closes the model box and modifies the original page when it is submitted?

Allan Grant 2010-01-29 02:53:48

No need to use an iframe for a form. Use jQuery UI Dialog. Its callbacks give you time to validate the form before really closing the box, etc. Check out their demo here: http://jqueryui.com/demos/dialog/#modal-form

Doug Neiner 2010-01-29 03:09:02

LOL, just released I didn't actually answer your question. Since it is form I would consider that a good candidate for a Dialog.

Doug Neiner 2010-01-29 03:25:43

You answered it perfectly! Thanks. I'm moving forward to jQuery UI Dialog for my present need.

Allan Grant 2010-01-29 03:49:55

Thanks about the ColorBox. It is really awesome plugin for jQuery.

Braveyard 2010-01-29 03:53:57

JQuery UI Dialog with a "plugin" to support iframes: http://elijahmanor.com/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx

I use it because it's included in JQueryUI and uses the jquery ui theme you use, which makes for a consistent UI with little cost

AlfaTeK 2010-01-29 02:26:58

+2 A:

I use Colorbox, it is because it is recommended alternative in non-maintained thickbox.

Basically it allows iframe, so image, flash etc are all okay. Also it is incentive for me to upgrade jQuery to 1.3.2 :-)

Tommy 2010-01-29 02:31:03

I guess I can check the documentation for this, but perhaps you know the quick answer from experience: do I have to use an iFrame? What about just generating the content straight from javascript? Forms?

Allan Grant 2010-01-29 02:51:32

You can use any type of HTML content with Colorbox, no iframe needed.

Doug Neiner 2010-01-29 03:09:32

yes, you don't need iframe to display the box content, it is just a feature. btw, i use YAGNI approach. First capture what i need, then surf and find a lightbox that i don't need/change minimum of code to fit my need.

Tommy 2010-01-29 03:15:52

Good point, regarding YAGNI. :)

Allan Grant 2010-01-29 03:48:20

Thanks for recommendation. I think ColorBox will be mine new favorite jQuery Plugin. It looks really nice and small. +1 is coming here for this answer.

Braveyard 2010-01-29 03:55:43

One more thing to mention is that since i pick jQuery. I won't pick a lightbox that need another js framework such as mootools/sciptaculous/prototype etc. So, the first thing i must do is deciding which JS framework i should use carefully when i start a project. Colorbox is small (9KB) and it is MIT(personally MIT is my favorite)

Tommy 2010-01-29 04:10:10

ansaurus

tags:

views:

answers:

How do jQuery modal box plugins compare?

related questions