发布一个原创的Light Box，特点就是简单

基于JQuery的轻量级LightBox。特点是超级好用，超级好看懂.
作者：Surance http://www.fltek.com.cn

老板叫我们做一个弹出窗口，而且不被浏览器拦截的。在网上搜了一下，发现这东西叫做Light Box。

在网上看了一些Light Box，总是有这样那样的问题。比如说有些Light Box不支持弹出日历控件，有些Light Box颜色不好看。于是就研究了一下Jquery写了一个最简单，最轻量的Light Box。下载地址：

下载

=====================
Lightbox”是一个别致且易用的弹出页面/图片显示效果，它可以使弹出窗口或者图片直接呈现在当前页面之上而不用转到新的窗口。类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点。

＝＝＝＝＝＝＝＝＝主要代码：

调用代码：

 

< a  href ="http://www.163.com/"  title ="163"  class ="testLink1" > 163 </ a >

 

JS：

 

  < script type = " text/javascript " >
       // var SUR_OverClick = true;
      $(document).ready( function () ... {
      
           //例子1
         $("a.testLink1").click(function()...{
          SUR_show(this.href,500,700);
          return false;
          });
        
        
} );
      
      
     </ script >

 

/**/ /* SuranceBox 0.9
 * Required: http://jquery.com/
 * Written by: Surance
 * Website: www.fltek.com.cn 
 * Email:[email protected]
 * License: LGPL 
 */

// 全局变量 可改默认的设置
var  SUR_FIRST  =   true ;
var  SUR_HEIGHT  =   450 ;
var  SUR_WIDTH  =   450 ;
var  SUR_WEB  =   ' http://www.fltek.com.cn/ ' ;
var  SUR_Refresh  =   false ;  // 是否关闭后要刷新
var  SUR_OverClick  =   true ;  // 是否可以点窗口外来关闭

// 扩展方法
// 显示方法
// url:地址
// height:高度
// width：宽度
// refreshable:是否关闭后要刷新
// overclickalbe:是否可以点窗口外来关闭
function  SUR_show_ex(url, height, width,refreshable,overclickalbe)
... {
    SUR_Refresh = refreshable;
    SUR_OverClick = overclickalbe;
    SUR_show(url, height, width)
}

// 默认方法
// 显示方法
// url:地址
// height:高度
// width：宽度
function  SUR_show(url, height, width)
... {
  SUR_HEIGHT = height || SUR_HEIGHT;
  SUR_WIDTH = width || SUR_WIDTH;
  SUR_WEB = "http://www.fltek.com.cn/";
  if(SUR_FIRST) 
  ...{
    $(document.body).append("<div id='SUR_overlay'></div><div id=SUR_container><div id='SUR_window'><iframe id='SUR_frame' src='http://www.fltek.com.cn/'></iframe></div><div id='SUR_caption'><img src='close.png' alt='关 闭'/></div></div>");
    $("#SUR_caption img").click(SUR_hide);
    if(SUR_OverClick)
    ...{
        $("#SUR_overlay").click(SUR_hide);
    }

    $(window).resize(SUR_calPosition);
    SUR_calOverLayerHeight();
    SUR_FIRST = false;
  }
  
  SUR_WEB = url;
  $("#SUR_frame").attr("src",SUR_WEB);

  $("#SUR_overlay").show();
  SUR_calPosition();

  $("#SUR_container").show("slow");

}

// 隐藏方法
function  SUR_hide()
... {
  $("#SUR_container").hide();
  $("#SUR_overlay").hide();
  if(SUR_Refresh)
  ...{
        window.location.reload();  
   }
}

// 计算位置
function  SUR_calPosition() 
... {
  var doc = document.documentElement;
  var w = self.innerWidth || (doc&&doc.clientWidth) || document.body.clientWidth;
  var h = self.innerHeight ||(doc&&doc.clientHeight) ||document.body.clientHeight;
  
  $("#SUR_container").css(...{width:SUR_WIDTH+"px",height:SUR_HEIGHT+"px",
    left: ((w - SUR_WIDTH)/2)+"px",top:((h - SUR_HEIGHT)/2-30)+"px"});
  $("#SUR_frame").css("height",SUR_HEIGHT - 40 +"px");
  
  doc.setAttribute("scrollTop",0);
  
}

function  SUR_calOverLayerHeight()
... {
    var h = document.body.clientHeight||600;
    $("#SUR_overlay").css("height",h+"px");
}