Lightbox类

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).style
function $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 >