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调用WebService的示例
Apr 07 Javascript
番茄的表单验证类代码修改版
Jul 18 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
jQuery构造函数init参数分析
May 13 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
浅谈Express异步进化史
Sep 09 Javascript
JavaScript基于SVG的图片切换效果实例代码
Dec 15 Javascript
React中使用Vditor自定义图片详解
Dec 25 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中的CMS的涵义
2007/03/11 PHP
PHP 上传文件大小限制
2009/07/05 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
深入分析PHP引用(&amp;)
2014/09/04 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
微信小程序实现watch监听
2020/06/04 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
用Python写冒泡排序代码
2016/04/12 Python
Python重新加载模块的实现方法
2018/10/16 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
python实现杨氏矩阵查找
2019/03/02 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python的pip有什么用
2020/06/17 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
Farnell德国:电子元器件供应商
2018/07/10 全球购物
迟到检讨书800字
2014/01/13 职场文书
市场营销管理制度
2014/01/29 职场文书
面试后的感谢信范文
2014/02/01 职场文书
效能监察建议书
2014/05/19 职场文书
行政求职信
2014/07/04 职场文书
农村文化活动总结
2014/08/28 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript
Python中Schedule模块使用详解 周期任务神器
2022/04/19 Python