js弹出层(jQuery插件形式附带reLoad功能)
2013-04-12 00:00
706 查看
之前做一个项目,感觉里面的弹出层做的挺好,但是代码结构有问题,这次用到了,重构了一下,改成jQuery的插件形式,并增加了reLoad的功能,感觉还不错,代码如下:
CSS代码如下:
这样来使用:
效果如下:
关闭的时候,这样调用:
这个弹出层有几个问题:
1、因为采用的是$.load()的方式,所以只能加载同源的url
2、在单页面的情况下,可以很好的定位,如果作为在iframe中弹出,则需要传入top值来辅助定位。这个问题是因为$(window).top()在单页面下和iframe下取的值不一样导致的,也不知该怎么解决。有了解的朋友说一下,不胜感激。
(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});
效果如下:
关闭的时候,这样调用:
$.module.hideWin();
这个弹出层有几个问题:
1、因为采用的是$.load()的方式,所以只能加载同源的url
2、在单页面的情况下,可以很好的定位,如果作为在iframe中弹出,则需要传入top值来辅助定位。这个问题是因为$(window).top()在单页面下和iframe下取的值不一样导致的,也不知该怎么解决。有了解的朋友说一下,不胜感激。
相关文章推荐
- js弹出层(jQuery插件形式附带reLoad功能)
- jQuery弹出下拉列表插件(实现kindeditor的@功能)
- 基于jquery的头像弹出框插件JSPOP配置说明
- jQuery插件jmodal模拟对话框实现javascript弹出对话框功能
- jquery弹出框插件 jquery.bpopup.min.js
- [原]发布一个jQuery弹出层插件,开源附主站,jquery.purebox.js
- 帮助用户更好的体验网站:jQuery的页面功能向导插件Pageguide.js
- 《转载》Barcode.js功能强大的条码生成jQuery插件
- jQuery弹出窗口插件"LeanModal.js"的使用
- 好用、功能强大的JQuery弹出层插件
- 帮助用户更好的体验网站:jQuery的页面功能向导插件Pageguide.js
- mac系统下jquery.uploadify.js功能无法使用的原因之一——flash插件被禁用
- 实用带多种CSS动画特效的jQuery弹出层插件hDialog.js
- jQuery结合jQuery.cookie.js插件实现换肤功能示例
- 使用jQuery的message插件或js实现右下角弹出消息框
- jQuery弹出下拉列表插件(实现kindeditor的@功能)
- 帮助用户更好的体验网站:jQuery的页面功能向导插件Pageguide.js
- 自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6