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 html 静态页面传参数
Apr 10 Javascript
JavaScript中的单引号和双引号报错的解决方法
Sep 01 Javascript
JS实现选择TextArea内文本的方法
Aug 03 Javascript
jQuery实现hover合成事件的方法
Aug 06 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
javascript执行环境及作用域详解
May 05 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
Jun 07 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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禁止页面缓存的代码
2011/10/23 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
js监听鼠标事件控制textarea输入字符串的个数
2014/09/29 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
js实现的xml对象转json功能示例
2016/12/24 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
javascript数组拍平方法总结
2018/01/20 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
史上最为详细的javascript继承(推荐)
2019/05/18 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
Django实现跨域请求过程详解
2019/07/25 Python
pip安装python库的方法总结
2019/08/02 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
普通大学毕业生自荐信范文
2014/02/23 职场文书
天坛导游词
2015/02/02 职场文书