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

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

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

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

下载

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

=========主要代码:

调用代码:

 

发布一个原创的Light Box,特点就是简单<href="http://www.163.com/" title="163" class="testLink1">163</a>

 

JS:

 

发布一个原创的Light Box,特点就是简单 <script type="text/javascript">
发布一个原创的Light Box,特点就是简单      
//var SUR_OverClick = true;
发布一个原创的Light Box,特点就是简单
      $(document).ready(function(){
发布一个原创的Light Box,特点就是简单      
发布一个原创的Light Box,特点就是简单           
//例子1
发布一个原创的Light Box,特点就是简单
         $("a.testLink1").click(function(){
发布一个原创的Light Box,特点就是简单          SUR_show(
this.href,500,700);
发布一个原创的Light Box,特点就是简单          
return false;
发布一个原创的Light Box,特点就是简单          }
);
发布一个原创的Light Box,特点就是简单        
发布一个原创的Light Box,特点就是简单        
发布一个原创的Light Box,特点就是简单}
);
发布一个原创的Light Box,特点就是简单      
发布一个原创的Light Box,特点就是简单      
发布一个原创的Light Box,特点就是简单    
</script>

 

发布一个原创的Light Box,特点就是简单/* SuranceBox 0.9
发布一个原创的Light Box,特点就是简单 * Required: http://jquery.com/
发布一个原创的Light Box,特点就是简单 * Written by: Surance
发布一个原创的Light Box,特点就是简单 * Website: www.fltek.com.cn 
发布一个原创的Light Box,特点就是简单 * Email:[email protected]
发布一个原创的Light Box,特点就是简单 * License: LGPL 
发布一个原创的Light Box,特点就是简单 
*/

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单
//全局变量 可改默认的设置
发布一个原创的Light Box,特点就是简单
var SUR_FIRST = true;
发布一个原创的Light Box,特点就是简单
var SUR_HEIGHT = 450;
发布一个原创的Light Box,特点就是简单
var SUR_WIDTH = 450;
发布一个原创的Light Box,特点就是简单
var SUR_WEB = 'http://www.fltek.com.cn/';
发布一个原创的Light Box,特点就是简单
var SUR_Refresh = false//是否关闭后要刷新
发布一个原创的Light Box,特点就是简单
var SUR_OverClick = true//是否可以点窗口外来关闭
发布一个原创的Light Box,特点就是简单

发布一个原创的Light Box,特点就是简单
//扩展方法
发布一个原创的Light Box,特点就是简单//
显示方法
发布一个原创的Light Box,特点就是简单//
url:地址
发布一个原创的Light Box,特点就是简单//
height:高度
发布一个原创的Light Box,特点就是简单//
width:宽度
发布一个原创的Light Box,特点就是简单//
refreshable:是否关闭后要刷新
发布一个原创的Light Box,特点就是简单//
overclickalbe:是否可以点窗口外来关闭
发布一个原创的Light Box,特点就是简单
function SUR_show_ex(url, height, width,refreshable,overclickalbe)
发布一个原创的Light Box,特点就是简单
{
发布一个原创的Light Box,特点就是简单    SUR_Refresh 
= refreshable;
发布一个原创的Light Box,特点就是简单    SUR_OverClick 
= overclickalbe;
发布一个原创的Light Box,特点就是简单    SUR_show(url, height, width)
发布一个原创的Light Box,特点就是简单}

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单
//默认方法
发布一个原创的Light Box,特点就是简单//
显示方法
发布一个原创的Light Box,特点就是简单//
url:地址
发布一个原创的Light Box,特点就是简单//
height:高度
发布一个原创的Light Box,特点就是简单//
width:宽度
发布一个原创的Light Box,特点就是简单
function SUR_show(url, height, width)
发布一个原创的Light Box,特点就是简单
{
发布一个原创的Light Box,特点就是简单  SUR_HEIGHT 
= height || SUR_HEIGHT;
发布一个原创的Light Box,特点就是简单  SUR_WIDTH 
= width || SUR_WIDTH;
发布一个原创的Light Box,特点就是简单  SUR_WEB 
= "http://www.fltek.com.cn/";
发布一个原创的Light Box,特点就是简单  
if(SUR_FIRST) 
发布一个原创的Light Box,特点就是简单  
{
发布一个原创的Light Box,特点就是简单    $(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>");
发布一个原创的Light Box,特点就是简单    $(
"#SUR_caption img").click(SUR_hide);
发布一个原创的Light Box,特点就是简单    
if(SUR_OverClick)
发布一个原创的Light Box,特点就是简单    
{
发布一个原创的Light Box,特点就是简单        $(
"#SUR_overlay").click(SUR_hide);
发布一个原创的Light Box,特点就是简单    }

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单    $(window).resize(SUR_calPosition);
发布一个原创的Light Box,特点就是简单    SUR_calOverLayerHeight();
发布一个原创的Light Box,特点就是简单    SUR_FIRST 
= false;
发布一个原创的Light Box,特点就是简单  }

发布一个原创的Light Box,特点就是简单  
发布一个原创的Light Box,特点就是简单  SUR_WEB 
= url;
发布一个原创的Light Box,特点就是简单  $(
"#SUR_frame").attr("src",SUR_WEB);
发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单  $(
"#SUR_overlay").show();
发布一个原创的Light Box,特点就是简单  SUR_calPosition();
发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单  $(
"#SUR_container").show("slow");
发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单}

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单
//隐藏方法
发布一个原创的Light Box,特点就是简单
function SUR_hide()
发布一个原创的Light Box,特点就是简单
{
发布一个原创的Light Box,特点就是简单  $(
"#SUR_container").hide();
发布一个原创的Light Box,特点就是简单  $(
"#SUR_overlay").hide();
发布一个原创的Light Box,特点就是简单  
if(SUR_Refresh)
发布一个原创的Light Box,特点就是简单  
{
发布一个原创的Light Box,特点就是简单        window.location.reload();  
发布一个原创的Light Box,特点就是简单   }

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

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单
//计算位置
发布一个原创的Light Box,特点就是简单
function SUR_calPosition() 
发布一个原创的Light Box,特点就是简单
{
发布一个原创的Light Box,特点就是简单  
var doc = document.documentElement;
发布一个原创的Light Box,特点就是简单  
var w = self.innerWidth || (doc&&doc.clientWidth) || document.body.clientWidth;
发布一个原创的Light Box,特点就是简单  
var h = self.innerHeight ||(doc&&doc.clientHeight) ||document.body.clientHeight;
发布一个原创的Light Box,特点就是简单  
发布一个原创的Light Box,特点就是简单  $(
"#SUR_container").css({width:SUR_WIDTH+"px",height:SUR_HEIGHT+"px",
发布一个原创的Light Box,特点就是简单    left: ((w 
- SUR_WIDTH)/2)+"px",top:((h - SUR_HEIGHT)/2-30)+"px"}
);
发布一个原创的Light Box,特点就是简单  $(
"#SUR_frame").css("height",SUR_HEIGHT - 40 +"px");
发布一个原创的Light Box,特点就是简单  
发布一个原创的Light Box,特点就是简单  doc.setAttribute(
"scrollTop",0);
发布一个原创的Light Box,特点就是简单  
发布一个原创的Light Box,特点就是简单}

发布一个原创的Light Box,特点就是简单
发布一个原创的Light Box,特点就是简单
function SUR_calOverLayerHeight()
发布一个原创的Light Box,特点就是简单
{
发布一个原创的Light Box,特点就是简单    
var h = document.body.clientHeight||600;
发布一个原创的Light Box,特点就是简单    $(
"#SUR_overlay").css("height",h+"px");
发布一个原创的Light Box,特点就是简单}

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