简单的网页灯箱效果，可以用来做登录、注册提示等效果，简单、易用。
本效果由原生javascript编写。
index.html
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<title>灯箱效果</title>
<script type='text/javascript' src='lightbox.js'></script>
<script type='text/javascript'>
window.onload=function(){
var box=new lightBox();
box.init('box');
var login=document.getElementByIdx_x_x('login');
var close=document.getElementByIdx_x_x('close');
var close_zone=document.getElementByIdx_x_x('close_zone');
login.onclick=function(){
box.show();
}
close.onclick=function(){
box.close();
}
}
</script>
<style type='text/css'>
#box{width:500px;height:300px;background:white;display:none;position:absolute;top:100px;}
#close_zone{height:30px;line-height:30px;border:1px solid #ccc;background:#eee;}
#close{float:right;margin-right:10px;}
a{color:#666;text-decoration:none;}
a:hover{text-decoration:underline;}
p{text-align:center;color:#666;margin-top:30px;}
</style>
</head>
<body>
<div id='box'>
<div id='close_zone' ><a href='javascript:void(0)' id='close' title='关闭'>关闭</span></a></div>
<p>关注<a href='http://weibo.com/u/1306149274'><font color='red'>新浪微博</font></a></p>
<p><a href='http://blog.sina.com.cn/u/1306149274'><font color='red'>新浪博客</a></a></p>
<p>简单的网页灯箱效果，可以用来做<br />登录、注册、提示等效果，简单、易用。</p>
</div>
<p><a href='javascript:void(0)' id='login' ><link>点击我</link></a></p>
</body>
</html>lightbox.js
var lightBox=function(){
//调用该构造器的原型方法init(),初始化灯箱效果
this.init.apply(this,arguments);
}
//灯箱构造器原型对象
lightBox.prototype={
//灯箱构造器初始化方法
init:function(id){
//显示层
if(!id && !(typeof id=== "string")){
return false;
}
this.box=document.getElementByIdx_x_x_x_x(id); //获取灯箱框
this.box.style.zIndex=10001; //设置覆盖的z轴坐标，确保位于上面
this.box.style.position="fixed"; //绝对定位显示
this.box.style.display='none'; //初始化为隐藏
//覆盖层
this.lay=document.body.insertBefore(document_createElement_x_x_x_x("div"),document.body.childNodes[0]);
//创建一个div元素
this.lay.style.display='none'; //初始化为隐藏显示
this.lay.style.backgroundColor="#000"; //设置背景色为黑色
this.lay.style.zIndex=10000; //设置覆盖的z轴，确保位于显示层的下方
this.lay.style.position='fixed'; //以固定定位显示
this.lay.style.left=0;
this.lay.style.top=0;
this.lay.style.width='100%';
this.lay.style.height='100%';
if(document.all){ //设置覆盖层透明度，兼容IE
this.lay.style.filter="alpha(opacity:60)";
}else{ //兼容FF
this.lay.style.opacity=0.6;
}
},
//显示灯箱
show:function(options){
this.lay.style.display="block"; //显示灯筱覆盖层
this.box.style.display="block"; //显示灯箱
var top=document.documentElement.scrollTop - this.box.offsetHeight/2; //居中定位
var left=document.documentElement.scrollLeft - this.box.offsetWidth/2; // 居中定位
//预防图像过大，影响效果
//如果图像高度不是很大，则可以考虑居中定位
if(top > -300){
this.box.style.marginTop = document.documentElement.scrollTop - this.box.offsetHeight/2 + "px";
this.box.style.top="50%";
}else{ //否则不在居中显示
this.box.style.top="50px";
}
//如果图像不是很大，则可以居中显示
if(left > -512){
this.box.style.marginLeft = document.documentElement.scrollLeft - this.box.offsetWidth/2 + "px";
this.box.style.left="50%";
}else{ //否则不在居中显示
this.box.style.left="20px";
}
},
//关闭灯箱
close:function(){
this.box.style.display="none"; //隐藏灯箱
this.lay.style.display="none"; //隐藏覆盖层
}
};