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对象的三个方法小结
Jan 12 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
JavaScript时间日期操作实例小结【5个示例】
Dec 22 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
理解和运用PHP中的多态性[译]
2011/08/02 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
PHP设计模式之外观模式(Facade)入门与应用详解
2019/12/13 PHP
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
关于jquery input textare 事件绑定及用法学习
2013/04/03 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
JavaScript运算符小结
2015/06/03 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
react-native 完整实现登录功能的示例代码
2017/09/11 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
React实现评论的添加和删除
2020/10/20 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
在Python的Django框架中创建语言文件
2015/07/27 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
Python文件操作函数用法实例详解
2019/12/24 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
基于python调用jenkins-cli实现快速发布
2020/08/14 Python
python 实现汉诺塔游戏
2020/11/28 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
作文批改评语大全
2014/04/23 职场文书
小学语文业务学习材料
2014/06/02 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
mysql中整数数据类型tinyint详解
2021/12/06 MySQL