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 表单之间的数据传递代码
Dec 04 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js动态调用css属性的小规律及实例说明
Dec 28 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
jQuery Validate初步体验(二)
Dec 12 Javascript
详解JavaScript中基于原型prototype的继承特性
May 05 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 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中Smarty模板初体验
2011/08/08 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
Web前端框架Angular4.0.0 正式版发布
2017/03/28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
JavaScript指定断点操作实例教程
2018/09/18 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
Python 中的with关键字使用详解
2016/09/11 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
python记录程序运行时间的三种方法
2017/07/14 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python处理PDF与CDF实例
2020/02/26 Python
结合CSS3的新特性来总结垂直居中的实现方法
2016/05/30 HTML / CSS
仓库保管员岗位职责
2013/12/20 职场文书
和平主题的演讲稿
2014/01/12 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
幼儿园教师考核制度
2014/02/01 职场文书
社区工作者感言
2014/03/02 职场文书
2014年收银工作总结
2014/11/13 职场文书
鲁迅故居导游词
2015/02/05 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python