赶知识网

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

Js/Css/jQuery 2009-12-01发布 6135次点击

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

SimpleModal – Lightweight jQuery Modal Dialog

 概述:   
SimpleModal 是一个轻量级的jQuery插件,它为模式对话框开发提供了一个功能强大的接口。可以把它看作一个模式对话框框架。 SimpleModal给你充分的灵活性去实现你的任何构想, 将你从UI开发的跨浏览器兼容性问题中解脱出来。
官方地址:
      http://www.ericmmartin.com/projects/simplemodal/

FancyBox
  概述: 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.

图片文字: 是
相册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,支持窗口缩放什么的,但生产的代码也太复杂了,不推荐。

Top10

沪ICP备09053415号 © 赶知识网