疯狂的Lightbox

原文：http://particletree.com/features/lightbox-gone-wild/
 

1.Lightbox简介：

LightBox是一个很棒的模组窗口Javascript包，用它展示信息，要比新开个窗口，或者强制弹出一个页面都来的要好.
 
SpringSide2中在书店前台用户登录里引入了LightBox。 

2.LightBox使用

2.1 所需文件

springside将lightbox文件都放在了widgets/lightbox目录里 ，要注意的是，必须要有激发LightBox效果的语句，才好引用lightbox.js，否则会js出错。

<script src="${ctx}/scripts/prototype.js"  type="text/javascript"></script>
<script src="${ctx}/widgets/lightbox/lightbox.js" type="text/javascript"></script>
<link href="${ctx}/widgets/lightbox/lightbox.css" type="text/css" rel="stylesheet">

2.2 激发LightBox效果

仅仅通过 class="lbOn"即可完成这个效果，会用lightbox打开login.jsp

<a href="login.jsp"  class="lbOn">SignUp</a>

2.3 退出LightBox效果

也是仅仅使用class="lbAction" rel="deactivate"

<a href="#" class="lbAction" rel="deactivate">Cancel<a>

2.4 在LightBox内部连接至另外一个页面：

直接使用a href连接过去即可，class仍然使用 class="lbAction" ,rel="insert";

<a href="confirm.html" class="lbAction" rel="insert">Go to Another Lightbox</a>

2.5 遮盖效果配置

    修改lightbox.css

#overlay {
 display: none;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 5000;
 background-color: #000;
 -moz-opacity: 0.5;
 opacity: .50;
 filter: alpha( opacity = 50 );
}

3. LightBox工作原理：

 当用户点击了class="lbOn"样式的a href连接，一个透明层会覆盖页面顶层，并且在第一次载入的调入下面这些：
 

<div id="overlay"></div>
<div id="lightbox">
    <div id="lbLoadMessage">
        <p>Loading</p>
    </div>
</div>

  如果想改变载入事的消息，只需要修改 <div id="lightbox">中的<div id="lbLoadMessage">的信息，如改为 "载入中"。

  载入的代码如下：

 function initialize(){
     lbox = document.getElementsByClassName('lbOn');
     for(i = 0; i < lbox.length; i++) {
         valid = new lightbox(lbox[i]);
     }
}

CSS覆盖效果代码:

#lightbox{
    display:none;
    position: absolute;
    top:50%;
    left:50%;
    z-index:9999;
    width:500px;
    height:400px;
    margin:-220px 0 0 -250px;
    }
#lightbox[id]{ /* IE6 and below Can't See This */
    position:fixed;
    }

#overlay{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:5000;  
    background-color:#000;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
    }
#overlay[id]{ /* IE6 and below Can't See This */
    position:fixed;
    }

覆盖IE的html动过下面这段：

prepareIE: function(height, overflow){
    bod = document.getElementsByTagName('body')[0];
    bod.style.height = height;
    bod.style.overflow = overflow;

    htm = document.getElementsByTagName('html')[0];
    htm.style.height = height;
    htm.style.overflow = overflow;
}

  

getScroll() & setScroll()getScroll:function (){
    var yScroll;

    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
    } elseif (document.documentElement && document.documentElement.scrollTop){  // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
    } elseif (document.body) {// all other Explorers
        yScroll = document.body.scrollTop;
    }
        this.yPos = yScroll;
}
setScroll:function(x, y){
    window.scrollTo(x, y);
}

在IE中,select表单位于页面的顶层，<DIV/>会覆盖不掉，同样的FireFox中的Flash8夜是如此，我们都过以下代码吧它们遮盖掉。

hideSelects()

hideSelects: function(visibility){
   selects = document.getElementsByTagName('select');
   for(i = 0; i < selects.length; i++) {
      selects\[i\].style.visibility = visibility;
 }
},

4. Lightbox Class介绍

初始化时：
initialize

initialize: function(ctrl) {
      this.content = ctrl.href;
      Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
     ctrl.onclick = function(){returnfalse;};
}

激活时：

activate(): 

activate: function(){
    if (browser == 'Internet Explorer'){
        this.getScroll();
        this.prepareIE('100%', 'hidden');
        this.setScroll(0,0);
        this.hideSelects('hidden');
    }
    this.displayLightbox("block");
},

displayLightbox(): 

displayLightbox: function(display){
    $('overlay').style.display = display;
    $('lightbox').style.display = display;
   if(display \!= 'none') this.loadInfo();
},

loadInfo(): 

loadInfo: function() {
    var myAjax = new Ajax.Request(
    this.content,

    {method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
    );
},

processInfo(): 

processInfo: function(response){
    info = "<div id='lbContent'>" + response.responseText + "</div>";
    new Insertion.Before($('lbLoadMessage'), info)
    $('lightbox').className = "done";
    this.actions();
},

actions(): 

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>

actions预先先吧 class="lbAction"给读取到了。这样点击的时候，就知道改做什么动作了。主要包括 rel="deactiveate" 和 rel="insert";

actions:function(){
lbActions = document.getElementsByClassName('lbAction');

for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this\[lbActions[i].rel\].bindAsEventListener(this), false);
lbActions[i].onclick = function()
{returnfalse;}

;
}
},

deactivate() 退出Ligthbox

如果退出LightBox 就使用rel = deactivate 代码如下：

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
deactivate:function (){
Element.remove($('lbContent'));

if (browser == "Internet Explorer")
{ this.setScroll(0,this.yPos); this.prepareIE("auto", "auto"); this.hideSelects("visible"); }

this.displayBlock("none");
}

insert() 在LightBox内部跳转

在lightbox内部，连接至另外一个页面，就通过insert方法

<a href="http://wiki.springside.org.cn/pages/editpage.action#"  class="lbAction" rel="deactivate">cancel</a>
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));

var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);
},