JavaScript 仿LightBox内容显示效果 -- 叁柒設計_三七设计 Three Seven Design Workroom -- 日志展示

来源：cloudgamer

近来要做一个LightBox的效果（也有的叫Windows关机效果），不过不用那么复杂，能显示一个内容框就行了。
这个效果很久以前就做过，无非就是一个覆盖全屏的层，加一个内容显示的层。不过showbo教了我position:fixed这个新特性，决定重写一遍。

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript 仿LightBox内容显示效果</title>
</head>

<body>

var isIE = (document.all) ? true : false;

var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);

var $ = function (id) {
	return "string" == typeof id ? document.getElementById(id) : id;
};

var Class = {
	create: function() {
		return function() { this.initialize.apply(this, arguments); }
	}
}

var Extend = function(destination, source) {
	for (var property in source) {
		destination[property] = source[property];
	}
}

var Bind = function(object, fun) {
	return function() {
		return fun.apply(object, arguments);
	}
}

var Each = function(list, fun){
	for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};

var Contains = function(a, b){
	return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}

var OverLay = Class.create();
OverLay.prototype = {
  initialize: function(options) {

this.SetOptions(options);
	
	this.Lay = $(this.options.Lay) || document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]);
	
	this.Color = this.options.Color;
	this.Opacity = parseInt(this.options.Opacity);
	this.zIndex = parseInt(this.options.zIndex);
	
	with(this.Lay.style){ display = "none"; zIndex = this.zIndex; left = top = 0; position = "fixed"; width = height = "100%"; }
	
	if(isIE6){
		this.Lay.style.position = "absolute";
		//ie6设置覆盖层大小程序
		this._resize = Bind(this, function(){
			this.Lay.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
			this.Lay.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";
		});
		//遮盖select
		this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
	}
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
		Lay:		null,//覆盖层对象
		Color:		"#fff",//背景色
		Opacity:	50,//透明度(0-100)
		zIndex:		1000//层叠顺序
    };
    Extend(this.options, options || {});
  },
  //显示
  Show: function() {
	//兼容ie6
	if(isIE6){ this._resize(); window.attachEvent("onresize", this._resize); }
	//设置样式
	with(this.Lay.style){
		//设置透明度
		isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
		backgroundColor = this.Color; display = "block";
	}
  },
  //关闭
  Close: function() {
	this.Lay.style.display = "none";
	if(isIE6){ window.detachEvent("onresize", this._resize); }
  }
};

//覆盖层
	this.Over && this.OverLay.Show();
	
	this.Box.style.display = "block";
	
	//居中
	if(this.Center){
		this.Box.style.top = this.Box.style.left = "50%";
		//设置margin
		if(this.Fixed){
			this.Box.style.marginTop = - this.Box.offsetHeight / 2 + "px";
			this.Box.style.marginLeft = - this.Box.offsetWidth / 2 + "px";
		}else{
			this.SetCenter();
		}
	}
	
	//兼容ie6
	if(isIE6){
		if(!this.Over){
			//没有覆盖层ie6需要把不在Box上的select隐藏
			this._select.length = 0;
			Each(document.getElementsByTagName("select"), Bind(this, function(o){
				if(!Contains(this.Box, o)){ o.style.visibility = "hidden"; this._select.push(o); }
			}))
		}
		//设置显示位置
		this.Center ? this.SetCenter() : this.Fixed && this.SetFixed();
		//设置定位
		this.Fixed && window.attachEvent("onscroll", this._fixed);
	}
	
	this.onShow();
  },
  //关闭
  Close: function() {
	this.Box.style.display = "none";
	this.OverLay.Close();
	if(isIE6){
		window.detachEvent("onscroll", this._fixed);
		Each(this._select, function(o){ o.style.visibility = "visible"; });
	}
  }
};

</script>

<dl id="idBox" class="lightbox">
  <dt id="idBoxHead"><b>LightBox</b> </dt>
  <dd>
    内容显示
    <br /><br />
    <input name="" type="button" value=" 关闭 " id="idBoxCancel" />
    <br /><br />
  </dd>
</dl>

<input type="button" value="关闭覆盖层" id="btnOverlay" />
<input type="button" value="黑色覆盖层" id="btnOverColor" />
<input type="button" value="全透覆盖层" id="btnOverOpacity" />
<input type="button" value="定位效果" id="btnFixed" />
<input type="button" value="居中效果" id="btnCenter" />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<select>
<option>覆盖select测试</option>
</select> 
<input name="" type="button" value=" 打开 " id="idBoxOpen" />

</div>

var box = new LightBox("idBox");

$("idBoxCancel").onclick = function(){ box.Close(); }
$("idBoxOpen").onclick = function(){ box.Show(); }

$("btnOverlay").onclick = function(){
	box.Close();
	if(box.Over){
		box.Over = false;
		this.value = "打开覆盖层";
	} else {
		box.Over = true;
		this.value = "关闭覆盖层";
	}
}

$("btnOverColor").onclick = function(){
	box.Close();
	box.Over = true;
	if(box.OverLay.Color == "#fff"){
		box.OverLay.Color = "#000";
		this.value = "白色覆盖层";
	} else {
		box.OverLay.Color = "#fff"
		this.value = "黑色覆盖层";
	}
}

$("btnOverOpacity").onclick = function(){
	box.Close();
	box.Over = true;
	if(box.OverLay.Opacity == 0){
		box.OverLay.Opacity = 50;
		this.value = "全透覆盖层";
	} else {
		box.OverLay.Opacity = 0;
		this.value = "半透覆盖层";
	}
}

$("btnFixed").onclick = function(){
	box.Close();
	if(box.Fixed){
		box.Fixed = false;
		this.value = "定位效果";
	} else {
		box.Fixed = true;
		this.value = "取消定位";
	}
}

$("btnCenter").onclick = function(){
	box.Close();
	if(box.Center){
		box.Center = false;
		box.Box.style.left = box.Box.style.top = "20%";
		box.Box.style.marginTop = box.Box.style.marginLeft = "0";
		this.value = "居中效果";
	} else {
		box.Center = true;
		this.value = "重新定位";
	}
}
</script>

</body>
</html>