Lightbox类 < html > < head > < style type ="text/css" > ... /**//* lightbox CSS */#lightbox {...}{/**//*该层为高亮显示层*/ display: none; width:352px; height:150px; position:absolute; font-size:14px; font-family:"Tahoma",Verdana,Arial,宋体; z-index:9990; top: 190px; left: 33%;}.main{...}{ z-index:9999;position:absolute; top:0px; left:0px;} #lb_inner{...}{ width:350px; height:148px; background:#fff url(images/loading.gif) 15px 30px no-repeat; border:1px solid #ccc; border-right:1px solid #666; border-bottom:1px solid #666;} #lb_con{...}{ padding:20px 20px; position:absolute; left:50px;} .btn{...}{ text-align:center;position:absolute;top:100px;width:100%;}.shadow{...}{ z-index:9998;position:absolute; top:4px; left:4px; width:352px; height:150px; background:#666;opacity:0.2;filter:alpha(opacity=20);}#overlay {...}{/**//*该层为覆盖层*/ display: none; position: absolute; top: 0; z-index: 9000; background-color: #fff; filter:alpha(opacity=40); -moz-opacity: 0.4; opacity: 0.4;} </ style > < script type ="text/javascript" > ... var Class = ...{ create: function() ...{ return function() ...{ this.initialize.apply(this, arguments); } }}Object.extend = function(destination, source) ...{ for (var property in source) ...{ destination[property] = source[property]; } return destination;}//简化document.getElementById(element).stylefunction $C(element)...{ return document.getElementById(element).style;}var Lightbox = Class.create();Lightbox.prototype = ...{ initialize: function(options) ...{ //可以考虑在这里创建Lightbox的div结构,未知方法 this.SetBox(options); }, //设置默认属性 SetOptions: function(options) ...{ this.options = ...{//默认值 overlay: true,//覆盖层 bgImage: 'images/ending.gif',//背景图 content: '请点击"取消操作"返回',//内容 btn_value: '取消操作',//按钮内容 btn_onclick: this.Close//按钮操作 } Object.extend(this.options, options || ...{}); }, //设置Lightbox SetBox: function(options) ...{ this.SetOptions(options); $C("lb_inner").backgroundImage = 'url('+this.options.bgImage+')' document.getElementById("lb_con").innerHTML = this.options.content; var btn = document.getElementById("lb_btn"); btn.value = " "+this.options.btn_value+" "; btn.onclick = this.options.btn_onclick; }, //显示Lightbox Show: function(options) ...{ this.SetBox(options); if(this.options.overlay)...{ this.ShowOverlay(); } else ...{ this.CloseOverlay(); }; $C("lightbox").display="block"; SetSelects('hidden'); }, //关闭(隐藏)Lightbox Close: function() ...{ $C("overlay").display="none"; $C("lightbox").display="none"; SetSelects('visible'); }, //显示设置覆盖层 ShowOverlay: function() ...{ with ($C("overlay")) ...{ display="block"; width = 776+'px';//这里应根据实际情况确定 height = document.body.scrollHeight+'px'; } }, //关闭覆盖层 CloseOverlay: function() ...{ $C("overlay").display="none"; }};//设置所有select的css属性,由于select不能覆盖,所以在显示Lightbox时要隐藏掉function SetSelects(css) ...{ selects = document.getElementsByTagName("select"); var len = selects.length; for (i = 0; i != len; i++) selects[i].style.visibility = css;} </ script > </ head > < body > < div id ="overlay" ></ div > < div id ="lightbox" > < div class ="main" > < div id ="lb_inner" > < div id ="lb_con" > </ div > < div class ="btn" > < input id ="lb_btn" type ="button" /> </ div > </ div > </ div > < div class ="shadow" ></ div > </ div > < script type ="text/javascript" > ... //先创建和初始化一个Lightbox实例var box = new Lightbox();//然后就可以对这个Lightbox进行操作了box.Show(...{ bgImage: 'images/loading.gif', content: '内容显示', btn_value: '按钮'}); </ script > </ body > </ html >