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 相关文章推荐
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
js中switch case循环实例代码
Dec 30 Javascript
jquery 选取方法都有哪些
May 18 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
Dec 28 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
Vue中props的使用详解
Jun 15 Javascript
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 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防注入安全代码
2008/04/09 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
nodejs个人博客开发第六步 数据分页
2017/04/12 NodeJs
jquery 获取索引值在一定范围的列表方法
2018/01/25 jQuery
Bootstrap Table中的多选框删除功能
2018/07/15 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
CKEditor 4.4.1 添加代码高亮显示插件功能教程【使用官方推荐Code Snippet插件】
2019/06/14 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
tornado捕获和处理404错误的方法
2014/02/26 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python通过正则库爬取淘宝商品信息代码实例
2020/03/02 Python
Django的ListView超详细用法(含分页paginate)
2020/05/21 Python
利用python汇总统计多张Excel
2020/09/22 Python
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
假日旅行社实习自我鉴定
2013/09/24 职场文书
小学数学教学反思
2014/02/02 职场文书
五星级酒店餐饮部总监的标准岗位职责
2014/02/17 职场文书
文体活动总结范文
2014/05/05 职场文书
2014年党总支工作总结
2014/12/18 职场文书
少年雷锋观后感
2015/06/10 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers
python lambda 表达式形式分析
2022/04/03 Python
vue3.0 数字翻牌组件的使用方法详解
2022/04/20 Vue.js