WEB开发网
开发学院网页设计JavaScript JavaScript 仿LightBox内容显示效果 阅读

JavaScript 仿LightBox内容显示效果

 2010-09-14 13:25:00 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,JavaScript 仿LightBox内容显示效果,能显示一个内容框就行了,这个效果很久以前就做过,程序代码: 首先是覆盖层OverLay和LightBox的部分:Codevar isIE = (

本文示例源代码或素材下载

近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了。

这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层。不过showbo教了我position:fixed这个新特性,决定重写一遍。先看效果:

JavaScript 仿LightBox内容显示效果

ps:“定位效果”的意思是屏幕滚动也能固定位置,“视框定位拖放”是把拖放范围固定在屏幕并加“定位效果”。程序说明:要实现一个简单的LightBox效果,主要有两个部分:覆盖层和高亮层。而拖放功能跟上面的程序是完全独立的,可自行添加。

【跨浏览器的固定定位】

首先要先说说这个东西position:fixed,它的作用是跨浏览器的固定定位。

摘自详解定位与定位应用:

“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果,这个元素属性就是曾经不被支持的position:fixed; 他的含义就是:固定定位。这个固定与绝对定位很像,唯一不同的是绝对定位是被固定在网页中的某一个位置,而固定定位则是固定在浏览器的视框位置。”

程序中很多地方利用了这个css,ie7、ff都支持这个css,但ie6不支持,程序中只能是在ie6模拟这个效果。

【覆盖层】

覆盖层的作用是把焦点限制在高亮层上,原理是通过一个绝对定位的层(通常使用div),设置它的宽度和高度以致能覆盖整个屏幕(包括缩放和滚动浏览器的情况下),再给它设置一个比较高的zIndex来层叠在原有内容之上(但要比高亮层小),这样用户就只能点到这个层之上的内容了。

【覆盖屏幕】

覆盖层的关键就是如何做到覆盖整个屏幕(锁定整个页面),支持position:fixed的话很简单:

this.Lay.style.position="fixed";
this.Lay.style.width=this.Lay.style.height="100%";

这样能把浏览器的视框覆盖了,其中使用了fixed样式,这里的意思是定位在浏览器的视框,并100%覆盖。注意不要理解错为这个层覆盖了整个页面,它只是把浏览器可视的部分覆盖了来达到效果。ie6不支持怎么办?有几个方法:1,做一个覆盖视框的层,并在onscroll时相应移动,在onresize时重新设大小;2,做一个覆盖视框的层,在样式上模拟fixed效果;3,做一个层覆盖了整个页面的层,并在onresize时重新设大小;

方法1的缺点是滚动时很容易露出马脚,而且不好看;方法2的缺点是需要页面结构的改动和body样式的修改,绝对不是好的架构;而我用的是方法3,有更好的方法欢迎提出。

用这个方法只要把position设为absolute,并设置相应的width和height即可:

Code

this.Lay.style.position="absolute";
this._size=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";
}.bind(this);
要注意的是scrollWidth和clientWidth的区别,顺带还有offsetWidth,手册上的说明:scrollWidth:Retrieves the scrolling width of the object.
clientWidth:Retrieves the width of the object including padding, but not including margin, border, or scroll bar.
offsetWidth:Retrieves the width of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

我的理解是(用Height容易测试):

scrollHeight是对象的内容的高度;clientHeight是对象的可视部分高度;offsetHeight是clientHeight加上border和滚动条本身高度。

举个例子吧,先说说clientHeight和offsetHeight的区别(在ie7中测试):

JavaScript 仿LightBox内容显示效果

可以看到clientHeight不受内容影响,都是83,即内容有没有超过对象高度都不受影响,但scrollHeight会受内容高度影响,而且从测试可以意识到:当有滚动条时,覆盖层的高度应该取scrollHeight(内容高度);当没有滚动条时,覆盖层的高度应该取clientHeight(视框高度)。而恰好两个情况都是取两者中比较大的值,所以就有了以下程序:

Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px";

设宽度时是不包括滚动条部分的而documentElement一般也没有border,所以不需要offsetWidth。

上面可以看到我用的是documentElement而不是body,手册上是这样说的:

Retrieves a reference to the root node of the document.意思是整个文档的根节点,其实就是html节点(body的上一级),注意这是在XHTML的标准下。上面可以看到我们取值的对象是整个文档而不只是body,所以这里用documentElement。还要注意的是在onresize的时候scrollWidth和clientWidth的值会产生变化,所以需要在事件中重新设置宽度高度:

if(isIE6){ this._size(); window.attachEvent("onresize", this._size); }

【覆盖select】

自定义的层给select遮挡住是一个老问题了,不过可喜的是ie7和ff都已经支持select的zIndex,只要给层设定高的zIndex就能覆盖select了,可惜对于ie6这个问题还是需要解决。

覆盖select据我所知有两个比较好的方法:

1,显示层时,先隐藏select,关闭层时再重新显示;2,用一个iframe作为层的底,来遮住select。

方法1应该都明白,方法2就是利用iframe可以覆盖select的特性,只要把一个iframe作为层的底部就可以覆盖下面的select了,程序中是这样使用的:

this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'

可以看出这个透明的iframe也以同样覆盖整个页面,如果是有内容显示的页面最好设置z-index:-1;确保iframe在层的底部。

个人觉得使用方法2比较好,但始终是改变了页面结构,不保证在任何情况下都不对页面产生影响,至于方法1就比较保守,但安全安心。

【高亮层】

高亮层就是用来显示内容的层,没什么看头,所以特意加了些效果在上面,吸引一下眼球。

【固定定位】

这里“固定定位”的意思是当滚动滚动条时,高亮层依然保持在浏览器对应的位置上。

同样对于支持fixed的浏览器很简单,只要把position设为fixed就行了,这个样式本来就是这样用的,但可怜的ie6只能模拟了。

ie6模拟的原理是在onscroll事件中,不断根据滚动的距离修正top和left。

首先设置position未absolute,并记录当前scrollTop和scrollLeft的值,给onscroll事件添加定位函数_fixed:

Code

this.Box.style.position = "absolute";
this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
window.attachEvent("onscroll", this._fixed);
其中定位函数是这样的:

Code

var iTop = document.documentElement.scrollTop - this._top + this.Box.offsetTop, iLeft = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft;
//居中时需要修正
if(this.Center){ iTop += this.Box.offsetHeight / 2; iLeft += this.Box.offsetWidth / 2; }
  
this.Box.style.top = iTop + "px"; this.Box.style.left = iLeft + "px";
  
this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
原理也很简单,就是把当前scrollTop减去_top值(上一个scrollTop值)再加上当前的offsetTop,就得到要设置的top值了。

【居中显示】

“居中显示”的意思是高亮层位于视框左右上下居中的位置。

实现这个有两个方法:1,视框宽度减去高亮层宽度的一半就是居中需要的left值;2,先设置left值为50%,然后marginLeft设为负的高亮层宽度的一半。

方法1相对方法2需要多一个视框宽度,而且方法2在缩放浏览器时也能保持居中,明显方法2是更好,但方法2设一个负的margin也可能会有很多意想不到的问题,毕竟margin这个样式比较麻烦(例如下面修正的地方)。这里我选择了方法2,还要注意offsetWidth需要在高亮层显示之后才能获取,所以定位程序需要放到高亮层显示之后:

Code

this.Box.style.top = this.Box.style.left = "50%";
//显示后才能获取
var iTop = - this.Box.offsetHeight / 2, iLeft = - this.Box.offsetWidth / 2;
还有一个问题是在ie6或不是固定定位的情况下(使用absolute定位的时候)需要加上scrollLeft来修正:Code//ie6或不是固定定位要修正
if(!this.Fixed || isIE6){ iTop += document.documentElement.scrollTop; iLeft += document.documentElement.scrollLeft; }
this.Box.style.marginTop = iTop + "px"; this.Box.style.marginLeft = iLeft + "px";

由于使用了负值的margin,固定定位程序_fixed也需要修正一下:

if(this.Center){ iTop += this.Box.offsetHeight / 2; iLeft += this.Box.offsetWidth / 2; }

这是因为offsetLeft是不包含margin的,在设置left时必须把margin也算进去。

【比较文档位置】

在ie6当不显示覆盖层时需要另外隐藏select,这里使用了“覆盖select”的方法1,值得留意的是这里加了个select是否在高亮层的判断:

CodeEach(document.getElementsByTagName("select"), function(o){
  if(oThis.Box.contains ? !oThis.Box.contains(o) : !(oThis.Box.compareDocumentPosition(o) & 16)){
    o.style.visibility = "hidden"; oThis._select.push(o);
  }
})

在JavaScript 自定义多级联动浮动菜单中提过这个东西,但没说明,这里稍微讲解一下。手册里是这样写的:

Checks whether the given element is contained within the object.意思是检测所给对象是否包含在指定对象里面。注意如果所给对象就是指定对象本身也会返回true,虽然这样不太合理。但contains只是ie的专有属性,不过ff有功能更强大的compareDocumentPosition。

参考Comparing Document Position看下表:

从NodeA.compareDocumentPosition(NodeB)返回的结果:

Bits NumberMeaning
0000000Elements are identical.
0000011The nodes are in different documents (or one is outside of a document).
0000102Node B precedes Node A.
0001004Node A precedes Node B.
0010008Node B contains Node A.
01000016Node A contains Node B.
10000032For private use by the browser.

从这里可以看出NodeA.compareDocumentPosition(NodeB) & 16的意思是当第5位数是“1”时才返回16,也就是只有NodeA包含NodeB时返回16(&是位与运算)。

这样可以写一个通用的contains方法:a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);

ps:为什么不直接a.compareDocumentPosition(b) == 16,我也不清楚,网络上就流行用这个。

【拖放程序】

详细请参考JavaScript 拖放效果。

程序代码:

首先是覆盖层OverLay和LightBox的部分:

Codevar isIE = (document.all) ? true : false;var isIE6 = isIE && ([/MSIE (d).0/i.exec(navigator.userAgent)][0][1] == 6);
  
function Each(list, fun){
  for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
  
var $ = function (id) {
  return "string" == typeof id ? document.getElementById(id) : id;
};
  
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;
}
  
Function.prototype.bind = function(object) {
 var __method = this, args = Array.apply(null, arguments); args.shift();
 return function() {
  return __method.apply(object, args);
 }
}
  
var OverLay = Class.create();
OverLay.prototype = {
 initialize: function(overlay, options) {
  this.Lay = $(overlay);//覆盖层
  
  //ie6设置覆盖层大小程序
  this._size = function(){};
  
  this.SetOptions(options);
  
  this.Color = this.options.Color;
  this.Opacity = parseInt(this.options.Opacity);
  this.zIndex = parseInt(this.options.zIndex);
  
  this.Set();
 },
 //设置默认属性
 SetOptions: function(options) {
  this.options = {//默认值
    Color:    "#fff",//背景色
    Opacity:  50,//透明度(0-100)
    zIndex:    1000//层叠顺序
  };
  Object.extend(this.options, options || {});
 },
 //创建
 Set: function() {
  this.Lay.style.display = "none";
  this.Lay.style.zIndex = this.zIndex;
  this.Lay.style.left = this.Lay.style.top = 0;
  
  if(isIE6){
    this.Lay.style.position = "absolute";
    this._size = 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";
    }.bind(this);
    //遮盖select
    this.Lay.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>'
  } else {
    this.Lay.style.position = "fixed";
    this.Lay.style.width = this.Lay.style.height = "100%";
  }
 },
 //显示
 Show: function() {
  //设置样式
  this.Lay.style.backgroundColor = this.Color;
  //设置透明度
  if(isIE){
    this.Lay.style.filter = "alpha(opacity:" + this.Opacity + ")";
  } else {
    this.Lay.style.opacity = this.Opacity / 100;
  }
  //兼容ie6
  if(isIE6){ this._size(); window.attachEvent("onresize", this._size); }
  
  this.Lay.style.display = "block";
 },
 //关闭
 Close: function() {
  this.Lay.style.display = "none";
  if(isIE6){ window.detachEvent("onresize", this._size); }
 }
};
  
var LightBox = Class.create();
LightBox.prototype = {
 initialize: function(box, overlay, options) {
  
  this.Box = $(box);//显示层
  
  this.OverLay = new OverLay(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 = []; }
 },
 //设置默认属性
 SetOptions: function(options) {
  this.options = {//默认值
    Fixed:    false,//是否固定定位
    Over:    true,//是否显示覆盖层
    Center:    false,//是否居中
    onShow:    function(){}//显示时执行
  };
  Object.extend(this.options, options || {});
 },
 //兼容ie6的固定定位程序
 _fixed: function(){
  var iTop = document.documentElement.scrollTop - this._top + this.Box.offsetTop, iLeft = document.documentElement.scrollLeft - this._left + this.Box.offsetLeft;
  //居中时需要修正
  if(this.Center){ iTop += this.Box.offsetHeight / 2; iLeft += this.Box.offsetWidth / 2; }
  
  this.Box.style.top = iTop + "px"; this.Box.style.left = iLeft + "px";
  
  this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
 },
 //显示
 Show: function(options) {
  //固定定位
  if(this.Fixed){
    if(isIE6){
      //兼容ie6
      this.Box.style.position = "absolute";
      this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
      window.attachEvent("onscroll", this._fixed.bind(this));
    } else {
      this.Box.style.position = "fixed";
    }
  } else {
    this.Box.style.position = "absolute";
  }
  //覆盖层
  if(this.Over){
    //显示覆盖层,覆盖层自带select隐藏
    this.OverLay.Show();
  } else {
    //ie6需要把不在Box上的select隐藏
    if(isIE6){
      this._select = [];
      var oThis = this;
      Each(document.getElementsByTagName("select"), function(o){
        if(oThis.Box.contains ? !oThis.Box.contains(o) : !(oThis.Box.compareDocumentPosition(o) & 16)){
          o.style.visibility = "hidden"; oThis._select.push(o);
        }
      })
    }
  }
  
  this.Box.style.display = "block";
  
  //居中
  if(this.Center){
    this.Box.style.top = this.Box.style.left = "50%";
    //显示后才能获取
    var iTop = - this.Box.offsetHeight / 2, iLeft = - this.Box.offsetWidth / 2;
    //ie6或不是固定定位要修正
    if(!this.Fixed || isIE6){ iTop += document.documentElement.scrollTop; iLeft += document.documentElement.scrollLeft; }
    this.Box.style.marginTop = iTop + "px"; this.Box.style.marginLeft = iLeft + "px";
  }
  
  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"; }); }
 }
};

接着是拖放程序的部分:

Codefunction addEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.addEventListener) {
    oTarget.addEventListener(sEventType, fnHandler, false);
  } else if (oTarget.attachEvent) {
    oTarget.attachEvent("on" + sEventType, fnHandler);
  } else {
    oTarget["on" + sEventType] = fnHandler;
  }
};function removeEventHandler(oTarget, sEventType, fnHandler) {
  if (oTarget.removeEventListener) {
    oTarget.removeEventListener(sEventType, fnHandler, false);
  } else if (oTarget.detachEvent) {
    oTarget.detachEvent("on" + sEventType, fnHandler);
  } else {
    oTarget["on" + sEventType] = null;
  }
};
  
if(!isIE){
  HTMLElement.prototype.__defineGetter__("currentStyle", function () {
    return this.ownerDocument.defaultView.getComputedStyle(this, null);
  });
}
  
//拖放程序
var Drag = Class.create();
Drag.prototype = {
 //拖放对象,触发对象
 initialize: function(obj, drag, options) {
  var oThis = this;
  
  this._obj = $(obj);//拖放对象
  this.Drag = $(drag);//触发对象
  this._x = this._y = 0;//记录鼠标相对拖放对象的位置
  //事件对象(用于移除事件)
  this._fM = function(e){ oThis.Move(window.event || e); }
  this._fS = function(){ oThis.Stop(); }
  
  this.SetOptions(options);
  
  this.Limit = !!this.options.Limit;
  this.mxLeft = parseInt(this.options.mxLeft);
  this.mxRight = parseInt(this.options.mxRight);
  this.mxTop = parseInt(this.options.mxTop);
  this.mxBottom = parseInt(this.options.mxBottom);
  this.mxContainer = this.options.mxContainer;
  
  this.onMove = this.options.onMove;
  this.Lock = !!this.options.Lock;
  
  this._obj.style.position = "absolute";
  addEventHandler(this.Drag, "mousedown", function(e){ oThis.Start(window.event || e); });
 },
 //设置默认属性
 SetOptions: function(options) {
  this.options = {//默认值
    Limit:      false,//是否设置限制(为true时下面参数有用,可以是负数)
    mxLeft:      0,//左边限制
    mxRight:    0,//右边限制
    mxTop:      0,//上边限制
    mxBottom:    0,//下边限制
    mxContainer:  null,//指定限制在容器内
    onMove:      function(){},//移动时执行
    Lock:      false//是否锁定
  };
  Object.extend(this.options, options || {});
 },
 //准备拖动
 Start: function(oEvent) {
  if(this.Lock){ return; }
  //记录鼠标相对拖放对象的位置
  this._x = oEvent.clientX - this._obj.offsetLeft;
  this._y = oEvent.clientY - this._obj.offsetTop;
  //mousemove时移动 mouseup时停止
  addEventHandler(document, "mousemove", this._fM);
  addEventHandler(document, "mouseup", this._fS);
  //使鼠标移到窗口外也能释放
  if(isIE){
    addEventHandler(this.Drag, "losecapture", this._fS);
    this.Drag.setCapture();
  }else{
    addEventHandler(window, "blur", this._fS);
  }
 },
 //拖动
 Move: function(oEvent) {
  //判断是否锁定
  if(this.Lock){ this.Stop(); return; }
  //清除选择(ie设置捕获后默认带这个)
  window.getSelection && window.getSelection().removeAllRanges();
  //当前鼠标位置减去相对拖放对象的位置得到offset位置
  var iLeft = oEvent.clientX - this._x, iTop = oEvent.clientY - this._y;
  //设置范围限制
  if(this.Limit){
    //如果设置了容器,因为容器大小可能会变化所以每次都要设
    if(!!this.mxContainer){
      this.mxLeft = this.mxTop = 0;
      this.mxRight = this.mxContainer.clientWidth;
      this.mxBottom = this.mxContainer.clientHeight;
    }
    //获取超出长度
    var iRight = iLeft + this._obj.offsetWidth - this.mxRight, iBottom = iTop + this._obj.offsetHeight - this.mxBottom;
    //这里是先设置右边下边再设置左边上边,可能会不准确
    if(iRight > 0) iLeft -= iRight;
    if(iBottom > 0) iTop -= iBottom;
    if(this.mxLeft > iLeft) iLeft = this.mxLeft;
    if(this.mxTop > iTop) iTop = this.mxTop;
  }
  //设置位置
  //由于offset是把margin也算进去的所以要减去
  this._obj.style.left = iLeft - (parseInt(this._obj.currentStyle.marginLeft) || 0) + "px";
  this._obj.style.top = iTop - (parseInt(this._obj.currentStyle.marginTop) || 0) + "px";  
  //附加程序
  this.onMove();
 },
 //停止拖动
 Stop: function() {
  //移除事件
  removeEventHandler(document, "mousemove", this._fM);
  removeEventHandler(document, "mouseup", this._fS);
  if(isIE){
    removeEventHandler(this.Drag, "losecapture", this._fS);
    this.Drag.releaseCapture();
  }else{
    removeEventHandler(window, "blur", this._fS);
  }
 }
};

使用说明:

首先要有一个高亮层:

Code<style>
.lightbox{width:300px;background:#FFFFFF; top:20%; left:20%;border:1px solid #ccc;line-height:25px; margin:0;}
.lightbox dt{background:#f4f4f4; padding:5px; cursor:move;}
</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 id="idOverlay"></div>

接着就可以实例化一个LightBox:

var box = new LightBox("idBox", "idOverlay", { Center: true });

打开和关闭LightBox分别是Show()和Close()方法,

其中LightBox有下面几个属性:

属性:默认值//说明
Fixed:false,//是否固定定位
Over:true,//是否显示覆盖层
Center:false,//是否居中
onShow:function(){}//显示时执行还有OverLay属性是覆盖层对象,它也有几个属性:
Color:"#fff",//背景色
Opacity:50,//透明度(0-100)
zIndex:1000//层叠顺序

实例中完整测试代码:

Code<input name="" type="button" value="关闭覆盖层" id="btnOverlay" />
<input name="" type="button" value="黑色覆盖层" id="btnOverColor" />
<input name="" type="button" value="全透覆盖层" id="btnOverOpacity" />
<input name="" type="button" value="取消居中" id="btnCenter" />
<br /><br />
选择效果:

<br />
<select id="idEffect">
<option value="0">还原效果</option>
<option value="4">定位效果</option>
<option value="2">设置拖放</option>
<option value="6">视框定位拖放</option>
</select>
<input name="" type="button" value=" 打开 " id="idBoxOpen" />
  
<script>
  
var box = new LightBox("idBox", "idOverlay", { Center: true });
  
var drag = new Drag("idBox", "idBoxHead", { mxContainer: document.documentElement, Lock: true });
  
$("idBoxCancel").onclick = function(){ box.Close(); }
$("idBoxOpen").onclick = function(){ box.Show(); }
  
$("idEffect").onchange = function(){
  box.Close();
  
  switch (parseInt(this.value)) {
    case 4 :
      box.Fixed = true;
      drag.Lock = true;
      drag.Limit = false;
      break;
    case 2 :
      box.Fixed = false;
      drag.Lock = false;
      drag.Limit = false;
      break;
    case 6 :
      box.Fixed = true;;
      drag.Lock = false;
      drag.Limit = true;
      break;
    case 0 :
    default :
      box.Fixed = false;
      drag.Lock = true;
      drag.Limit = false;
  }
}
  
$("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 = "半透覆盖层";
  }
}
  
$("btnCenter").onclick = function(){
  box.Close();
  if(box.Center){
    box.Center = false;
    this.value = "设置居中";
  } else {
    box.Center = true;
    this.value = "取消居中";
  }
}
  
</script>

Tags:JavaScript LightBox

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接