LightBox

来源：互联网发布：有道英语发音软件编辑：程序博客网时间：2024/05/18 01:34

Lightbox的效果类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。

•Lightbox的作用则相当于从前只在IE中被支持的"Modal Dialog"；现在在FireFox也可用window.open(url, name, " modal=yes ");来实现同样的效果。使用"Modal Dialog"将限制用户的操作于弹出的对话框中，只有完成设定好的操作后方才关闭。在一些逻辑敏感的应用中强制吸引用户的注意力以防止用户的误操作导致程序逻辑淆乱。

•其实 Lightbox 并不新鲜，在前年Ajax未诞生之前，它是以 "Inline Popup"的名号出现的。诞生的原因是因为屏蔽弹出窗口的技术纷纷被浏览器采用，而浏览器厂商间也没有一个统一的 Popup 解决方案。

•　　"Inline Popup" 并不被很多人关注，不过我还是发现国内的163信箱去年改版推出的时候大量使用了此效果。Ajax 名正言顺之时，"Inline Popup"也重装再现了，并换了一个有美感的名字 "Lightbox"。

要实现一个简单的LightBox效果，主要有两个部分：覆盖层和高亮层。
【覆盖层】
覆盖层的作用是把焦点限制在高亮层上，原理是通过一个绝对定位的层（通常使

用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的

情况下），再给它设置一个比较高的zIndex来层叠在原有内容之上（但要比高亮

层小），这样用户就只能点到这个层之上的内容了。
【覆盖屏幕】
覆盖层的关键就是如何做到覆盖整个屏幕（锁定整个页面），支持

position:fixed的话很简单：
with(this.Lay.style)

{ display = "none"; zIndex = this.zIndex; left = top = 0; position = "f

ixed"; width = height = "100%"; }
这样能把浏览器的视框覆盖了，其中使用了fixed样式，这里的意思是定位在浏览

器的视框，并100%覆盖。注意不要理解错为这个层覆盖了整个页面，它只是把

浏览器可视的部分覆盖了来达到效果。
ie6不支持怎么办？有几个方法：1，做一个覆盖视框的层，并在onscroll时相应

移动，在onresize时重新设大小；2，做一个覆盖视框的层，在样式上模拟

fixed效果；3，做一个层覆盖了整个页面的层，并在onresize时重新设大小；
方法1的缺点是滚动时很容易露出马脚，而且不好看；
方法2的缺点是需要页面结构的改动和body样式的修改，绝对不是好的架构；
用这个方法只要把position设为absolute，并使用一个_resize方法来设置width

和height即可：
【跨浏览器的固定定位】
首先要先说说这个东西position:fixed ，它的作用是跨浏览器的固定定位。
如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可

以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被

支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，

唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在

浏览器的视框位置。
【高亮层】

高亮层就是用来显示内容的层，没什么看头，所以特意加了些效果

在上面，吸引一下眼球。
【固定定位】
这里“固定定位”的意思是当滚动滚动条时，高亮层依然保持在浏览器对应的位

置上，把Fixed设为true就会开启这个效果。
同样对于支持fixed的浏览器很简单，只要把position设为fixed就行了。
【居中显示】
“居中显示”的意思是高亮层位于视框左右上下居中的位置。

实现这个有两个方法：
1，视框宽度减去高亮层宽度的一半就是居中需要的 left值；
2，先设置left值为50%，然后marginLeft设为负的高亮层宽度的一半。
方法1相对方法2需要多一个视框宽度，而且方法2在缩放浏览器时也能保持居中，

明显方法2是更好，不过用margin会影响到left和top的计算，必须注意（例如

SetFix修正的地方）。这里我选择了方法2，还要注意offsetWidth和

offsetHeight需要在高亮层显示之后才能获取，所以定位程序需要放到高亮层显

示之后：
实例化一个LightBox：var box = new LightBox("idBox");
打开和关闭LightBox分别是Show()和Close()方法，其中LightBox有下面几个属性

：属性:默认值//说明
Over:true,//是否显示覆盖层
Fixed:false,// 是否固定定位
Center:false,//是否居中
onShow:function(){}//显示时执行
还有OverLay属性是覆盖层对象，它也有几个属性：
属性:默认值//说明

Lay:null,//覆盖层对象
Color:"#fff",// 背景色
Opacity:50,//透明度(0-100)
zIndex:1000//层叠顺序
Lightbox的js脚本目前也是种类多样，它能被快速安装并且运作于所有流行的浏

览器.
使用方法：
<script type="text/javascript" src="lightbox.js"></script>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image

#1</a>
基于jquery开发的一个图片展示特效，这个插件实际应用的包仅仅7K够小了吧。

关键在于使用的时候非常简单，似乎你根本就不用修改你的任何代码包括Html。

利用jquery的选择器，然后直接绑定lightBox方法就可以了。
体积小，使用简单，无侵入是lightbox的最大优点了。

代码如下：

Code:

<!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 background="1.jpg">
<br /><br /><br /><br />
<script>
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: "#000",//背景色
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); }
}
};
var LightBox = Class.create();
LightBox.prototype = {
initialize: function(box, options) {
this.Box = $(box);//显示层
this.OverLay = new OverLay(options);//覆盖层
this.SetOptions(options);
this.Fixed = !!this.options.Fixed;
this.Over = !!this.options.Over;
this.Center = !!this.options.Center;
this.onShow = this.options.onShow;
this.Box.style.zIndex = this.OverLay.zIndex + 1;
this.Box.style.display = "none";
//兼容ie6用的属性
if(isIE6){
this._top = this._left = 0; this._select = [];
this._fixed = Bind(this, function(){ this.Center ? this.SetCenter() : this.SetFixed(); });
}
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Over: true,//是否显示覆盖层
Fixed: true,//是否固定定位
Center: true,//是否居中
onShow: function(){}//显示时执行
};
Extend(this.options, options || {});
},
//兼容ie6的固定定位程序
SetFixed: function(){
this.Box.style.top = document.documentElement.scrollTop - this._top + this.Box.offsetTop + "px";
this.Box.style.left = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft + "px";
this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
},
//兼容ie6的居中定位程序
SetCenter: function(){
this.Box.style.marginTop = document.documentElement.scrollTop - this.Box.offsetHeight / 2 + "px";
this.Box.style.marginLeft = document.documentElement.scrollLeft - this.Box.offsetWidth / 2 + "px";
},
//显示
Show: function(options) {
//固定定位
this.Box.style.position = this.Fixed && !isIE6 ? "fixed" : "absolute";
//覆盖层
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>
<style>
.lightbox{width:300px;background:#FFFFFF;border:1px solid #ccc;line-height:25px; top:20%; left:20%;}
.lightbox dt{background:#f4f4f4; padding:5px;}
</style>
<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>
<div style="margin:0 auto; width:900px; height:1000px; border:1px solid #000000;">
<input name="" type="button" value=" 打开 " id="idBoxOpen" />
<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 />
</div>
</body>
</html>
<script>
var box = new LightBox("idBox");
$("idBoxCancel").onclick = function(){ box.Close(); }
$("idBoxOpen").onclick = function(){ box.Show(); }
</script>