JavaScript 仿LightBox内容显示效果

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

先看效果：

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即可：

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中测试)：

 

测的是外面的div，offsetHeight和clientHeight相差17（分别是83和100），这个相差的就是那个滚动条本身的高度。

再看看clientHeight和scrollHeight的区别(下面是模拟在ie中的情况)：

可以看到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：

this.Box.style.position = "absolute";
this._top = document.documentElement.scrollTop; this._left = document.documentElement.scrollLeft;
window.attachEvent("onscroll", this._fixed);

其中定位函数是这样的：

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需要在高亮层显示之后才能获取，所以定位程序需要放到高亮层显示之后：

this.Box.style.top = this.Box.style.left = "50%";
//显示后才能获取
var iTop = - this.Box.offsetHeight / 2, iLeft = - this.Box.offsetWidth / 2;

还有一个问题是在ie6或不是固定定位的情况下（使用absolute定位的时候）需要加上scrollLeft来修正：

//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是否在高亮层的判断：

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);
    }
})

在JavaScript 自定义多级联动浮动菜单中提过这个东西，但没说明，这里稍微讲解一下。手册里是这样写的：
Checks whether the given element is contained within the object.
意思是检测所给对象是否包含在指定对象里面。注意如果所给对象就是指定对象本身也会返回true，虽然这样不太合理。
但contains只是ie的专有属性，不过ff有功能更强大的compareDocumentPosition。

参考Comparing Document Position看下表：
从NodeA.compareDocumentPosition(NodeB)返回的结果：

Bits	Number	Meaning
000000	0	Elements are identical.
000001	1	The nodes are in different documents (or one is outside of a document).
000010	2	Node B precedes Node A.
000100	4	Node A precedes Node B.
001000	8	Node B contains Node A.
010000	16	Node A contains Node B.
100000	32	For 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 图片切割效果中已经有比较详细的说明，这里说说其他没说明和新添加的部分。

【容器范围限制】

这个加了一个容器范围限制，其实跟上次的范围限制差不多，只不过范围限制的参数改成从指

定容器中获取：

if(!!this.mxContainer){
    this.mxLeft = this.mxTop = 0;
    this.mxRight = this.mxContainer.clientWidth;
    this.mxBottom = this.mxContainer.clientHeight;
}

而且根据这里的情况（有滚动条的情况）每次移动都重新获取设置一次，效率有点低，所以不建议使用，或者根据情况放到Start中每次拖放才重新获取设置一次。

其他都是些小修改，例如考虑到有margin值的情况，所以设置位置时需要减去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";    

还有就是添加了一个Lock属性，判断对象当前是否可以拖放，其他都差不多。

程序代码：

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

var 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"; }); }
  }
};

接着是拖放程序的部分：

function 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);
    }
  }
};

使用说明：

首先要有一个高亮层：

<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//层叠顺序

实例中完整测试代码：

<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>

完整实例下载

Tag标签: JavaScript,LightBox,内容显示