需要注意的是，在IE浏览器中如果有标记，则该标记不能被覆盖层覆盖，但在其他浏览器中则可以覆盖。

在使用IE浏览器时，要先将网页中的元素隐藏起来。如以下代码可以用于隐藏页面所有的元素。
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
       selects[i].style.visibility = visibility;
}



代码实现


客户端代码
客户端的页面上有两个链接，用户单击链接后，向服务器端发送请求，并将返回信息显示到高亮层上。客户端的网页文件代码如下所示：

  
• One 
    

  
• Two 
    

另外，还需要设置该页面所使用CSS样式。lightbox.css样式表文件代码如下所示：
#lightbox {
      BORDER-RIGHT: #fff 1px solid;
      BORDER-TOP: #fff 1px solid;
       DISPLAY: none; 
       Z-INDEX: 9999; 
       BACKGROUND: #fdfce9; 
       LEFT: 50%; 
       MARGIN: -220px 0px 0px -250px; 
       BORDER-LEFT: #fff 1px solid; 
       WIDTH: 500px; 
       BORDER-BOTTOM: #fff 1px solid; 
       POSITION: absolute; 
       TOP: 50%; 
       HEIGHT: 400px; 
       TEXT-ALIGN: left
}
UNKNOWN {
     POSITION: fixed
}
#overlay {
      DISPLAY: none;
      Z-INDEX: 5000; FILTER: alpha(opacity=80); 
      LEFT: 0px; 
      WIDTH: 100%; 
      POSITION: absolute; 
      TOP: 0px; 
      HEIGHT: 100%; 
      BACKGROUND-COLOR: #000; moz-opacity: 0.8; opacity: .80
}
UNKNOWN {
    POSITION: fixed
}
.done#lightbox #lbLoadMessage {
      DISPLAY: none
}
.done#lightbox #lbContent {
      DISPLAY: block
}
.loading#lightbox #lbContent {
      DISPLAY: none
}
.loading#lightbox #lbLoadMessage {
       DISPLAY: block
}
.done#lightbox IMG {
      WIDTH: 100%; HEIGHT: 100%
}
客户端脚本
由于浏览器对图层的支持不同，所以首先要确定客户端浏览器的类型。以下代码可用于判断客户端的浏览器和操作系统。
var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

function getBrowserInfo() {
       if (checkIt('konqueror')) {
            browser = "Konqueror";
            OS = "Linux";
       }
       else if (checkIt('safari')) browser = "Safari"
       else if (checkIt('omniWeb')) browser = "OmniWeb"
       else if (checkIt('opera')) browser = "Opera"
       else if (checkIt('Webtv')) browser = "WebTV";
       else if (checkIt('icab')) browser = "iCab"
       else if (checkIt('msie')) browser = "Internet Explorer"
       else if (!checkIt('compatible')) {
             browser = "Netscape Navigator"
            version = detect.charAt(8);
       }
       else browser = "An unknown browser";

       if (!version) version = detect.charAt(place + thestring.length);

       if(!OS) {
            if (checkIt('linux')) OS = "Linux";
            else if (checkIt('x11')) OS = "Unix";
            else if (checkIt('mac')) OS = "Mac"
            else if (checkIt('win')) OS = "Windows"
            else OS = "an unknown operating system";
       }
}

function checkIt(string) {
        place = detect.indexOf(string) + 1;
        thestring = string;
        return place;
}
下面看一下网页加载时需要添加的方法。有关网页加载和初始化方法代码如下：
//网页加载调用initialize和getBrowserInfo方法
Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
//未加载时清空缓存
Event.observe(window, 'unload', Event.unloadCache, false);
//初始化方法
function initialize(){
        //调用该方法为该页添加覆盖层和高亮显示层
        addLightboxMarkup();
        //为每个可高亮显示的元素创建lightbox对象
        lbox = document.getElementsByClassName('lbOn');
        for(i = 0; i < lbox.length; i++) {
                    valid = new lightbox(lbox[i]);
        }
}

// 使用Dom方法创建覆盖层和高亮层
function addLightboxMarkup() {
        bod = document.getElementsByTagName('body')[0];
        overlay = document.createElement('div');
        overlay.id = 'overlay';
        lb = document.createElement('div');
        lb.id = 'lightbox';
        lb.className = 'loading';
        lb.innerHTML = '' +
                                           '

Loading

' +
                                           '';
        bod.appendChild(overlay);
        bod.appendChild(lb);
}
封装lightbox类
初始化数据时，为每个可高亮显示的链接创建了lightbox对象。该类的代码具体实现如下：
var lightbox = Class.create();  

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;};
       },

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

      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; 
      },

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

      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;
            }
      },

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

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

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

      },
      // 将返回的文本信息显示到高亮层上
      processInfo: function(response){
           //获得返回的文本数据
           var result = response.responseText;
           //显示到高亮层
           info = "" + result + "