最佳jQuery窗口插件(Modal Dialog Plugins)

以下我全试了, FancyBox, Boxy, FaceBox, BlockUI这四个最好, 它们各有所长.

FancyBox

21Andy.com译: FancyBox非常小且容易使用, 有很好的外观, 简洁和容易扩展的CSS, 可惜暂不支持Modal.
The FancyBox plugin is very simple and easy to implement, looks fantastic out of the box, and has very clean CSS for you to expand upon or modify to your liking. Unfortunately it lacks some features that others may have such as modal support but it is work checking out.

• 外观: 5/5 分
• 容易使用: 5/5 分
• 功能: 3/5 分
• 图片文字: 是
• 相册Rel: 是
• 内联支持: 是
• Iframe支持: 是
• Modal支持: 不
• 可定制性: 低
• 下载: FancyBox

Boxy

Boxy is probably my favorite modal dialog jquery plugin so far, its not bad looking out of the box, very simple to implement, and has quite a few strong/simplistic features which are very polished. If you are in need of this sort of functionality for an application check it out!

• 外观: 4/5 分
• 容易使用: 5/5 分
• 功能: 4/5 分
• 图片文字: 不
• 相册Rel: 不
• 内联支持: 是
• Iframe支持: 是
• Modal支持: 是
• 可定制性: 高
• 下载: Boxy

FaceBox

21Andy.com译: 懒得译了, 手酸.... -_!!
Although this popup script looks pretty slick I found that it loads fairly clunky, and seriously lacks in polish/features. I had to adjust paths right off the bat to get images to display properly, and it does not have basic support such as the rel attribute for galleries, title attribute for captions etc.

That being said if you love the Facebook popup look check it out!

• 外观: 4/5 分
• 容易使用: 4/5 分
• 功能: 2/5 分
• 图片文字: 不
• 相册Rel: 不
• 内联支持: 是
• Iframe支持: 不
• Modal支持: 不
• 可定制性: 低
• 下载: FaceBox

BlockUI

This again is more of a developers dialog solution, and a pretty good one at that. Along with providing highly customizable JavaScript modal dialog support, it also can block page elements, or the entire page until Ajax (or other processing) is complete, which is very handy for applications.

BlockUI is ugly out of the box however the site has some good clean examples and how to implement them. It is a little strange in the fact that CSS is applied via JavaScript configuration rather than a stylesheet.

• 外观: 1/5 分
• 容易使用: 3/5 分
• 功能: 5/5 分
• 图片文字: 不
• 相册Rel: 不
• 内联支持: 是
• Iframe支持: 是
• Modal支持: 是
• 可定制性: 高
• 下载: BlockUI

Impromptu

21Andy.com译: 懒得译了, 手酸.... -_!!
Not that Impromptu looks bad, I would hardly call it generic enough to be suitable for every site out of the box. For those of you looking for image support this is probably not the popup plugin for you, as it primarily was created for dialog support replacing alert(), prompt() etc. I did however get it working with images pretty quick, but either way this is more of an dialog popup script.

• 外观: 3/5 分
• 容易使用: 3/5 分
• 功能: 4/5 分
• 图片文字: 不
• 相册Rel: 不
• 内联支持: 不
• Iframe支持: 不
• Modal支持: 是
• 可定制性: 中
• 下载: Impromptu

nyroModal

This popup dialog plugin has tons of features and an overall sexy look and smooth animation. My main problem with this one is that the consistency was no really there it did nto feel as solid as some of the others and I was getting strange CSS break-age with some images/pages.

• 外观: 4/5 分
• 容易使用: 4/5 分
• 功能: 5/5 分
• 图片文字: 是
• 相册Rel: 是
• 内联支持: 是
• Iframe支持: 是
• Modal支持: 是
• 可定制性: 高
• 下载: nyroModal

FancyZoom

Another Fancy-something?? I guess so! they are very similar too, taking the Apple approach. I find this one to be fine, but the animations lag a little which I think really decreases user experience. Packing nearly the same features as FancyBox (less) I would suggest checking it out before this one.

• 外观: 3/5 分
• 容易使用: 4/5 分
• 功能: 1/5 分
• 图片文字: 是
• 相册Rel: 是
• 内联支持: 不
• Iframe支持: 不
• Modal支持: 不
• 可定制性: 低
• 下载: FancyZoom

Flyout

The most interesting thing about Flyout is its support for easing functions, making the animations much more amusing, as well as some interesting loading effects. Other than the effects this plugin seriously lacks in standard functionality and because of that I would certainly not recommend it.

• 外观: 2/5 分
• 容易使用: 4/5 分
• 功能: 1/5 分
• 图片文字: 不
• 相册Rel: 不
• 内联支持: 不
• Iframe支持: 不
• Modal支持: 不
• 可定制性: 低
• 下载: Flyout

其他jQuery窗口插件(Modal Dialog Plugins)

simplemodal: http://www.ericmmartin.com/projects/simplemodal/
jqModal: http://dev.iceburg.net/jquery/jqModal/#examples
simplemodal、jqModal 。这两个是最简单的，灵活性很好，需要配置的多，学习成本高。
如果你希望定制自己的Dialog，这两个插件，可以作为基础包，在基础包在封装一下。就可以很方便的满足你的要求。

http://jquery.com/demo/thickbox/
thickbox是我以前用了很长时间的, 现在不推荐了.

http://www.malsup.com/jquery/block/
BlockUI效果很好。而且官方的帮助也很详细，如果只是简单的使用遮蔽，推荐使用，上手也容易。

http://docs.jquery.com/UI/Dialog
官方的要，还要引几个扩展的JS,支持窗口缩放什么的，但生产的代码也太复杂了，不推荐。

Tags: Dialog, jQuery, Modal, plugin, 插件, 窗口

本文地址: http://www.21andy.com/blog/20090611/1324.html