Thickbox - 基于 jQuery，支持 AJAX，轻量级的而且比较高效。可以在 lightbox 中使用图片或 HTML。大小约为 40k，目前还可作为 WordPress 的插件使用。
GreyBox - 创建 iframe 的弹出界面，可使用图片、HTML 及 URL，大小约为 20k。
GreyBox Redux - 基于 jQuery，比 GreyBox 更轻。
Lightbox v2.0 - 最初是为了显示图片设计的，使用了 prototype 和 sciptaculous，所以有些沉重，但对于图片来说很好用。
Lightbox with moo.fx - 基于 prototype，但只能用于图片。
Lightbox Gone Wild - modal 模式窗口的 lightbox，可使用 html、表单及图片，也是基于 prototype 的，所以有一些 heavy。
Multi-faceted LIghtbox - 又一个基于 prototype 的，不过这个为各种可用于 lightbox 的数据类型提供了选项。
Leightbox - 和 Lightbox Gone Wild 很相似，只是 Leightbox 以 html 方式存放内容，所以可以被搜索引擎索引到。
xilinus - 使用简单，基于 prototype，很容易定制，可使用多种内容选项。
Lightbox Plus - 可以自动根据窗口的大小缩放图片。
Suckerfish Hover Lighbox - 和传统的 lightbox 不一样，它在打开 lightbox 的时候，还可以点击访问页面上的其它元素。
Litebox - 这是 Lightbox 的另一个版本，代码量减少了，使用了 moo.fx 和 prototype-lite，如果页面需要减肥的话，可以选择这个。
LITBox - 使用类写的 lightbox，所以可以创建多个对象实例，并且单独进行控制。基于 Thickbox。

疯狂的Lightbox
原文：http://particletree.com/features/lightbox-gone-wild/


Lightbox简介：
用户界面接口设计中，有时候会用模态窗口，而LightBox 是比模态窗口更酷的一个窗口效果。

SpringSide2中在书店前台用户登录里引入了LightBox。

所需文件：
springside将lightbox文件都放在了widgets/lightbox目录里 ，要注意的是，必须要有激发LightBox效果的语句，才好引用lightbox.js，否则会js出错。

<script src="${ctx}/scripts/prototype.js"  type="text/javascript"></script>
<script src="${ctx}/widgets/lightbox/lightbox.js" type="text/javascript"></script>
<link href="${ctx}/widgets/lightbox/lightbox.css" type="text/css" rel="stylesheet">
激发LightBox效果
仅仅通过 class="lbOn"即可完成这个效果，会用lightbox打开login.jsp

<a href="login.jsp"  class="lbOn">SignUp</a>
退出LightBox效果
也是仅仅使用class="lbAction" rel="deactivate"

<a href="http://wiki.springside.org.cn/pages/editpage.action#" class="lbAction" rel="deactivate">Cancel<a>
在LightBox内部连接至另外一个页面：
直接使用a href连接过去即可，class仍然使用 lbAction ,rel="insert";

<a href="confirm.html" class="lbAction" rel="insert">Go to Another Lightbox</a>
工作原理：
当用户点击了class="lbOn"样式的a href连接，一个透明层会覆盖页面顶层，并且在第一次载入的调入下面这些：


<div id="overlay"></div>
<div id="lightbox">
    <div id="lbLoadMessage">
        <p>Loading</p>
    </div>
</div>
  如果想改变载入事的消息，只需要修改 <div id="lightbox">中的<div id="lbLoadMessage">的信息。 Loading 或者 "载入中" 都可以 代码如下：

function initialize(){
     lbox = document.getElementsByClassName('lbOn');
     for(i = 0; i < lbox.length; i++) {
         valid = new lightbox(lbox);
     }
}
CSS覆盖效果代码:

#lightbox{
    display:none;
    position: absolute;
    top:50%;
    left:50%;
    z-index:9999;
    width:500px;
    height:400px;
    margin:-220px 0 0 -250px;
    }
#lightbox[id]{ /* IE6 and below Can't See This */
    position:fixed;
    }

#overlay{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:5000;  
    background-color:#000;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
#overlay[id]{ /* IE6 and below Can't See This */
    position:fixed;
    }
覆盖IE的html动过下面这段：

prepareIE: function(height, overflow){
    bod = document.getElementsByTagName('body')[0];
    bod.style.height = height;
    bod.style.overflow = overflow;

    htm = document.getElementsByTagName('html')[0];
    htm.style.height = height;
    htm.style.overflow = overflow;
}
  

getScroll() & setScroll()getScroll:function (){
    var yScroll;

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }
        this.yPos = yScroll;
}
setScroll:function(x, y){
    window.scrollTo(x, y);
}
在IE中,select表单位于页面的顶层，<DIV/>会覆盖不掉，同样的FireFox中的Flash8夜是如此，我们都过以下代码吧它们遮盖掉。

hideSelects()

hideSelects: function(visibility){
    selects = document.getElementsByTagName('select');
    for(i = 0; i < selects.length; i++) {
        selects\[i\].style.visibility = visibility;
    }
},
Lightbox Class介绍
初始化时：
initialize

initialize: function(ctrl) {
    this.content = ctrl.href;
    Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
    ctrl.onclick = function(){return false;};
}
激活时：

activate():

activate: function(){
    if (browser == 'Internet Explorer'){
        this.getScroll();
        this.prepareIE('100%', 'hidden');
        this.setScroll(0,0);
        this.hideSelects('hidden');
    }
    this.displayLightbox("block");
},
displayLightbox():

displayLightbox: function(display){
    $('overlay').style.display = display;
    $('lightbox').style.display = display;
   if(display \!= 'none') this.loadInfo();
},
loadInfo():

loadInfo: function() {
    var myAjax = new Ajax.Request(
    this.content,

    {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
    );
},
processInfo():

processInfo: function(response){
    info = "<div id='lbContent'>" + response.responseText + "</div>";
    new Insertion.Before($('lbLoadMessage'), info)
    $('lightbox').className = "done";
    this.actions();
},
actions():

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
actions预先先吧 class="lbAction"给读取到了。这样点击的时候，就知道改做什么动作了。主要包括 rel="deactiveate" 和 rel="insert";

actions:function(){
lbActions = document.getElementsByClassName('lbAction');

for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions, 'click', this\[lbActions.rel\].bindAsEventListener(this), false);
lbActions.onclick = function()
{return false;}

;
}
},
deactivate() 退出Ligthbox

如果退出LightBox 就使用rel = deactivate 代码如下：

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
deactivate:function (){
Element.remove($('lbContent'));

if (browser == "Internet Explorer")
{ this.setScroll(0,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }

this.displayBlock("none");
}
insert() 在LightBox内部跳转

在lightbox内部，连接至另外一个页面，就通过insert方法

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));

var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},

小结：
LightBox是一个很棒的工具，
用它展示信息，要比新开个窗口，或者强制弹出一个页面都来的要好.

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。文字表述显然不够明了，所以请先看一下Lightbox的演示页面。

如何使用？
1.Lightbox能非常简单地应用到您的页面上。首先将lightbox.js包含到您页面的header部分：
<script src="lightbox.js" type="text/javascript"></script>

2.将rel="lightbox"属性加入到任何有链接的标记里面用以激活Lightbox功能，例如：
<a title="my caption" href="images/image-1.jpg" rel="lightbox">image #1</a>

3.也许您注意到了上面那个例子中，当“打开”图片时会看到图片下面有一段说明文字。这是由title属性控制的。title属性是一个可选项，也就是说您可以不写，当然最好还是简短的说明一下比较好。

怎样定制？
可以使用CSS来对“图片层”进行修饰，在上面的那个示例页面中，我们采用了以下CSS代码：
#lightbox{
    background-color:#eee;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
    }
    #lightboxDetails{
    font-size: 0.8em;
    padding-top: 0.4em;
    }
    #lightboxCaption{ float: left; }
    #keyboardMsg{ float: right; }
    #lightbox img{ border: none; }
    #overlay img{ border: none; }

想要产生阴影效果的话，需要准备一张半透明的PNG图片和少许CSS。由于IE对PNG图形的糟糕支持（它不支持PNG透明）我们不得不针对它写更多的代码：
#overlay{ background-image: url(overlay.png); }
    * html #overlay {
    background-color: #000;
    back\ground-color: transparent;
    background-image: url(blank.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
    }

lightbox.js有一句
var loadingImage = 'loading.gif';
它是用来控制图片完全加载之前的那个“Loading...”效果的，你可以使用任何来图片替代它。
同样的，
var closeButton = 'close.gif';
用以控制“关闭”按钮的图片来源。

下载(见附件)
lightbox.js - Javascript主文件
lightbox.css - “图片层”样式文件
overlay.png - 80% 透明度PNG图片，用以实现阴影效果
loading.gif - “Loading”图片
close.gif - “关闭” 按钮

经典论坛斑斑子乌建议将
* html #overlay {
background-color: #000;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}
这段CSS代码单独放在一个CSS文件中，比如forIE.css。然后通过以下代码引用到页面中：
<!--[if IE]>
<style type="text/css" media="all">
@import url(/html/css/forIE.css);
</style>
<![endif]-->

引用地址: http://www.5dlog.com/trackback.asp?tbID=221