lightbox.prototype = {
       yPos : 0,
       xPos : 0,
      //构造方法,ctrl为创建该对象的元素
       initialize: function(ctrl) {
              //将该元素的链接赋值给this.content
              this.content = ctrl.href;
              //为该元素添加onclick事件activate方法
              Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
              ctrl.onclick = function(){return false;};
       },www.goodsgy.com

       //当单击链接时
       activate: function(){
              if (browser == 'Internet Explorer'){//判断为IE浏览器
                     this.getScroll();
                     this.prepareIE('100%', 'hidden');
                     this.setScroll(0,0);
                     this.hideSelects('hidden');//隐藏所有的<select>标记
              }
              //调用该类中的displayLightbox方法
              this.displayLightbox("block");
      },www.goodsgy.com

      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;
      },www.goodsgy.com

      hideSelects: function(visibility){
           selects = document.getElementsByTagName('select');
           for(i = 0; i < selects.length; i++) {
                   selects[i].style.visibility = visibility;
            }
      },www.goodsgy.com

      getScroll: function(){
            if (self.pageYOffset) {
                    this.yPos = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop){
                    this.yPos = document.documentElement.scrollTop;
            } else if (document.body) {
                    this.yPos = document.body.scrollTop;
            }
      },www.goodsgy.com

      setScroll: function(x, y){
            window.scrollTo(x, y);
      },www.goodsgy.com

      displayLightbox: function(display){
            //将覆盖层显示
            $('overlay').style.display = display;
            //将高亮层显示
            $('lightbox').style.display = display;
            //如果不是隐藏状态,则调用该类中的loadInfo方法
            if(display != 'none') this.loadInfo();
      },www.goodsgy.com

      //该方法发送Ajax请求
      loadInfo: function() {
            //当请求完成后调用本类中processInfo方法
            var myAjax = new Ajax.Request(
          this.content,
          {method: 'get', parameters: "", onComplete: this.processInfo.bindAsEvent Listener (this)}
           );www.goodsgy.com

      },
      // 将返回的文本信息显示到高亮层上
      processInfo: function(response){
           //获得返回的文本数据
           var result = response.responseText;
           //显示到高亮层
           info = "<div id='lbContent'>" + result + "</div>";
           //在info元素前插入一个元素
           new Insertion.Before($('lbLoadMessage'), info)
           //改变该元素的class name的值
           $('lightbox').className = "done";
           //调用本类中actions方法
           this.actions();
           var ctrl=$('lightbox');
           //为高亮层添加事件处理方法reset
          Event.observe(ctrl, 'click', this.reset.bindAsEventListener(this), false);
           ctrl.onclick = function(){return false;};
      },
      //恢复初始状态
      reset:function(){
            //隐藏覆盖层
           $('overlay').style.display="none";
           //清空返回数据
            $('lbContent').innerHTML="";
            //隐藏高亮层
           $('lightbox').style.display="none";
     },
     // Search through new links within the lightbox, and attach click event
     actions: function(){
           lbActions = document.getElementsByClassName('lbAction');
           for(i = 0; i < lbActions.length; i++) {
                   Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAs EventListener(this), false);
                   lbActions[i].onclick = function(){return false;};
           }www.goodsgy.com

     }
}www.goodsgy.com

提示：由于该对象比较复杂，读者可以仔细参阅代码的注释部分。www.goodsgy.com

服务器端代码www.goodsgy.com

服务器端首先获得查询中的“id”值，如果该值为null或为空，则设置为默认值。然后判断该值，并且返回相应的一段字符串信息。处理请求的getInfojsp页面代码如下：
<%@ page language="java" import="java.util.*"%>
<%
//获得请求中id的值
  String imgID = request.getParameter("id");
  if (imgID==null||imgID.equals(""))//如果为null或为空
      imgID="one";//设定为默认值
  if ( imgID.equals("one"))//如果为one
  {
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Porsche Carrera GT</h3>
<p>The Carrera GT has a 5.7 litre V10 internal combustion engine that produces
  605 SAE horsepower (451 kW). Porsche claims it will accelerate from 0 to 100
  km/h (62 mph) in 3.9 seconds and has a maximum speed of 330 km/h (204 mph).
  With 605 hp, the car weighs 1,380 kg (3,042 lb). The Carrera GT is only
  offered with a six-speed manual transmission, in contrast to its rival the
  Ferrari Enzo that is only offered with sequential manual transmission. Also
  the Carrera GT is significantly less expensive than the Ferrari Enzo. The
  Ferrari Enzo is priced around $660,000 to the Carrera GT's $440,000. The
  Carrera GT is known for its high quality and reliability which makes it one of
  the best supercars ever.
<%}else{//否则
%>
<h3 id="cartitle" style="border-bottom: 1px solid #C0C0C0; margin-bottom: -5px">Ferrari Testarossa</h3>
<p>The Ferrari Testarossa is an V12 mid-engined sports car made by Ferrari.
  The name, which means &quot;red head&quot;, comes from the red painted cylinder heads on
  the flat-12 engine. The engine was technically a 180?V engine since it shared
  flat-plane crankshaft pins with opposing cylinders. Output was 390 hp (291
  kW), and the car won many comparison tests and admirers - it was featured on
  the cover of Road &amp; Track magazine nine times in just five years. Almost
  10,000 Testarossas, 512TRs, and 512Ms were produced, making this one of the
  most common Ferrari models despite its high price and exotic design.
<%}%>
http://blog.csdn.net/danforn/archive/2007/03/09/1525255.aspxwww.goodsgy.com