js popup layer (jQuery plug-in form comes with reLoad function)

js popup layer (jQuery plug-in form comes with reLoad function)_javascript skills

WBOY

Release： 2016-05-16 17:37:19

Original

1298 people have browsed it

I worked on a project before, and I felt that the pop-up layer inside was pretty good, but there was a problem with the code structure. I used it this time, refactored it, changed it to a jQuery plug-in form, and added the reLoad function. I feel pretty good. Code As follows:

Copy code The code is as follows:

(function($){
$ .module={
_showCoverLayer:function(){//Show cover layer
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=$("

");
$("body").append(this.coverLayer);
}
},
_hideCoverLayer:function(){/ /Hide cover layer
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=$("

");
$("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=$("

");
$("body") .append(this.win);
this.win.append("

< span id='TB_close'> /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){//Load a new page
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 code is as follows :

Copy code The code is as follows:

 
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下取的值不一样导致的，也不知该怎么解决。有了解的朋友说一下，不胜感激。