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中Math对象方法使用概述
Jan 02 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
jquery简单实现网页层的展开与收缩效果
Aug 07 Javascript
jQuery解析Json实例详解
Nov 24 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
JavaScript门面模式详解
Oct 19 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 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多进程编程实例
2014/10/15 PHP
CI框架(CodeIgniter)实现的导入、导出数据操作示例
2018/05/24 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
070823更新的一个[消息提示框]组件 兼容ie7
2007/08/29 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
2013/01/04 Javascript
javascript定义变量时有var和没有var的区别探讨
2014/07/21 Javascript
js读取cookie方法总结
2014/10/31 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JavaScript贪吃蛇小组件实例代码
2017/08/20 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
小程序如何写动态标签的实现方法
2020/02/05 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
python获取当前日期和时间的方法
2015/04/30 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
WxPython实现无边框界面
2019/11/18 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
澳大利亚波西米亚风连衣裙在线商店:Fortunate One
2019/04/01 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
门卫岗位职责
2013/11/15 职场文书
店长岗位职责
2013/11/21 职场文书
社区包粽子活动方案
2014/01/21 职场文书
小学生寒假家长评语
2014/04/16 职场文书
设计顾问服务计划书
2014/05/04 职场文书
课程设计的心得体会
2014/09/03 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
导游词之唐山景点
2019/12/18 职场文书