js弹出层(jQuery插件形式附带reLoad功能)


Posted in Javascript onApril 12, 2013

之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下:

(function($){ 
$.module={ 
_showCoverLayer:function(){//显示遮盖层 
this.coverLayer=$("#TB_overlay"); 
var height=$(document).height()+"px"; 
var width=$(document).width()+"px"; 
if(this.coverLayer.length>0){ 
this.coverLayer.css({"visibility":"visible","height":height,"width":width}); 
}else{ 
this.coverLayer=$("<div id='TB_overlay' style='height:"+height+";width:"+width+"'></div>"); 
$("body").append(this.coverLayer); 
} 
}, 
_hideCoverLayer:function(){//隐藏遮盖层 
this.coverLayer.css("visibility","hidden"); 
}, 
_showAjaxLoad:function(imgUrl){ 
this.ajaxLayer=$("#TB_load"); 
if(this.ajaxLayer.length>0){ 
this.ajaxLayer.css({"visibility":"visible"}); 
$("#TB_loadContent").css({"display":"block"}); 
}else{ 
this.ajaxLayer=$("<div id='TB_load'><div id='TB_loadContent'><img src='"+imgUrl+"' /></div></div>"); 
$("body").append(this.ajaxLayer); 
} 
}, 
_hideAjaxLoad:function(){ 
this.ajaxLayer.css("visibility","hidden"); 
$("#TB_loadContent").css({"display":"none"}); 
}, 
showWin:function(opt){//url,title,width,height,fixTop,fixLeft,imgUrl,top 
this._showCoverLayer(); 
this.imgUrl=opt.imgUrl || "/image/ajax-loader.gif"; 
this._showAjaxLoad(this.imgUrl); 
this.win=$("#TB_window"); 
var that=this; 
if(this.win.length==0){ 
this.win=$("<div id='TB_window'></div>"); 
$("body").append(this.win); 
this.win.append("<div id='TB_closeAjaxWindow' style='cursor:move' onmousedown='drag(this.parentNode,event);'><span id='TB_close'>X</span><span id='TB_title'>"+opt.title+"</span></div><div id='TB_ajaxContent'></div>"); 
$("#TB_close").click(function(){ 
that.hideWin(); 
}); 
} this._init(opt); 
$("#TB_ajaxContent").load(opt.url, function() { 
that._hideAjaxLoad(); 
that.win.slideDown("normal"); 
}); 
}, 
hideWin:function(){ 
var that=this; 
this.win.fadeOut("fast",function(){ 
that._hideCoverLayer(); 
}); 
}, 
_init:function(opt){ 
$("#TB_title").html(opt.title); 
var top=opt.top || ( $(window).height() - opt.height ) /2+(opt.fixTop || 0);// +$(window).scrollTop() ; 
var left=( $(window).width() - opt.width ) / 2+(opt.fixLeft || 0);//+$(window).scrollLeft(); 
this.win.css({"height":opt.height+"px", 
"width":opt.width+"px", 
"top":top+"px", 
"left":left+"px" 
}); 
}, 
reLoad:function(opt){//加载新页面 
var that=this; 
this.win.fadeOut("fast",function(){ 
that._showAjaxLoad(that.imgUrl); 
that._init(opt); 
$("#TB_ajaxContent").load(opt.url, function() { 
that._hideAjaxLoad(); 
that.win.fadeIn("normal"); 
}); 
}); 
} 
} 
})(jQuery);

CSS代码如下:
body {background-color:#fff;} 
html, body {height:100%;} 
html body{font:12px Arial, Helvetica, sans-serif;color:#333333} 
html>body{font:12px Arial, Helvetica, sans-serif;color:#333333} 
#TB_overlay { 
position: absolute; 
top: 0; 
left: 0; 
z-index:100; 
width: 100%; 
height: 100%; 
background-color:#CCC; 
filter:alpha(opacity=60); 
-moz-opacity: 0.6; 
opacity: 0.6; 
} 
#TB_window { 
top: 0px; 
left: 0px; 
position: fixed; 
_position: absolute; 
background: #fff; 
z-index: 102; 
color:#000000; 
display:none; 
border:5px solid #666; 
} 
#TB_caption{ 
height:25px; 
padding:10px 30px 10px 25px; 
} 
#TB_closeWindow{ 
height:25px; 
padding:10px 25px 10px 0; 
float:right; 
} 
#TB_closeAjaxWindow{ 
padding:5px 10px 7px 0; 
margin-bottom:1px; 
text-align:right; 
background-color:#e8e8e8; 
} 
#TB_close{ 
cursor:pointer; 
} 
#TB_title{ 
float: left; 
font-weight: bold; 
margin-left: 10px; 
} 
#TB_ajaxContent{ 
padding:2px 15px 15px 15px; 
overflow:auto; 
} 
#TB_load{ 
text-align: center; 
position: fixed; 
top: 50%; 
left: 0px; 
width: 100%; 
overflow: visible; 
visibility: visible; 
display: block; 
z-index:101; 
} 
/*Download by http://sc.xueit.com*/ 
#TB_loadContent{ 
margin-left: -125px; 
position: absolute; 
top: -50px; 
left: 50%; 
width: 250px; 
height: 100px; 
visibility: visible; 
}

这样来使用:
$.module.showWin({url:"/deposit/clear/"+depositId+"?"+(+new Date), 
title:"清退关闭", 
width:550, 
height:350});

效果如下:
js弹出层(jQuery插件形式附带reLoad功能) 
关闭的时候,这样调用:
$.module.hideWin();

这个弹出层有几个问题:
1、因为采用的是$.load()的方式,所以只能加载同源的url
2、在单页面的情况下,可以很好的定位,如果作为在iframe中弹出,则需要传入top值来辅助定位。这个问题是因为$(window).top()在单页面下和iframe下取的值不一样导致的,也不知该怎么解决。有了解的朋友说一下,不胜感激。
Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
javascript学习之闭包分析
Dec 02 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
Jquery倒计时源码分享
May 16 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
教你如何用node连接redis的示例代码
Jul 12 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
location对象的属性和方法应用(解析URL)
Apr 12 #Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 #Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 #Javascript
有关javascript的性能优化 (repaint和reflow)
Apr 12 #Javascript
引用外部js乱码问题分析及解决方案
Apr 12 #Javascript
关于query Javascript CSS Selector engine
Apr 12 #Javascript
使用jQuery清空file文件域的解决方案
Apr 12 #Javascript
You might like
PHP获取网站域名和地址的代码
2008/08/17 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
超清晰的document对象详解
2007/02/27 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
2017/03/10 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
Vue.js仿Select下拉框效果
2020/02/18 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python3调用百度AI识别图片中的文字功能示例【测试可用】
2019/03/13 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Django的models中on_delete参数详解
2019/07/16 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
协议书怎么写
2014/04/21 职场文书
绿色校园广播稿
2014/10/13 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2015暑假假期总结
2015/07/13 职场文书
妇产科护理心得体会
2016/01/22 职场文书
大学生如何逃脱“毕业季创业队即散伙”魔咒?
2019/08/19 职场文书