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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js窗口关闭提示信息(兼容IE和firefox)
Oct 23 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
vue增加强缓存和版本号的实现方法
May 01 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
vue使用canvas实现移动端手写签名
Sep 22 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开发中的中文编码问题
2013/08/08 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
JavaScript 组件之旅(三):用 Ant 构建组件
2009/10/28 Javascript
js textarea自动增高并隐藏滚动条
2009/12/16 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
2016/06/30 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
js canvas实现擦除效果示例代码
2017/04/26 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
2018/08/22 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
基于JavaScript 实现拖放功能
2019/09/12 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
详解Python中的日志模块logging
2015/06/19 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
python实现列表的排序方法分享
2019/07/01 Python
PyTorch的自适应池化Adaptive Pooling实例
2020/01/03 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
家长会邀请书
2014/01/25 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
新课培训心得体会
2014/09/03 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏