JS pop-up layer (jquery plug-in form with reload function) _javascript tips

Before doing a project, feel inside the pop-up layer to do very well, but the code structure has a problem, this time used, refactored, changed into jquery plug-in form, and increased the reload function, feeling good, the code is as follows:

Copy Code code as follows:

(function ($) {
$.module={
_showcoverlayer:function () {//Show masking 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=$ ("<div id= ' tb_overlay ' style= ' height:" +height+ "; width:" +width+ "' ></div>");
$ ("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=$ ("<div id= ' tb_load ' ><div id= ' tb_loadcontent ' ></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)/hydrate (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 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);

The CSS code is as follows:

Copy Code code 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;
}

To use this:

Copy Code code as follows:

$.module.showwin ({url: "/deposit/clear/" +depositid+ "?") + (+new Date),
Title: "Repaying Off",
WIDTH:550,
HEIGHT:350});

The effect is as follows:

When closed, this is called:

Copy Code code as follows:

$.module.hidewin ();

There are several problems with this pop-up layer:
1, because the use of $.load (), so can only load the same-origin URL
2, in the case of a single page, can be very good positioning, if as a bullet in the IFRAME, you need to pass in the top value to assist positioning. The problem is that the $ (window). Top () is not the same as the value under a single page and the IFRAME, and I don't know how to solve it. It is appreciated that you have a friend who knows.