js彈出層(jQuery插件形式附帶reLoad功能)_javascript技巧

之前做一個項目，感覺裡面的彈出層做的挺好，但是代碼結構有問題，這次用到了，重構了一下，改成jQuery的插件形式，並增加了reLoad的功能，感覺還不錯，代碼如下：

複製程式碼 程式碼如下:

(function($){

(function($){

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

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

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

X" opt.title "

");
$("#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 {背景顏色:#fff;}
html, body {高度:100%;}
html body{字體:12px Arial, Helvetica, sans-serif;color:#333333 } }
html>body{字體：12px Arial、Helvetica、sans-serif;顏色：#333333}
#TB_overlay {
位置：絕對；
頂部：0；
左：0；
z-index:100;
寬度：100%；
高度：100%;
背景顏色：#CCC;
濾鏡：alpha（不透明度=60）；
-moz-不透明度：0.6;
不透明度：0.6;
}
#TB_window {
頂部：0px;
左：0px;
位置：固定；
_位置：絕對；
背景：#fff;
z 索引：102;
顏色：#000000;
顯示：無;
邊框：5px實心#666；
}
#TB_caption{
高度：25px;
內邊距：10px 30px 10px 25px;
}
#TB_closeWindow{
高度：25p 10px 25px 10px 0;
浮動：右；
}
#TB_closeAjaxWindow{
填充：5px 10px 7px 0;
邊距底部：1px； 🎜>背景顏色：#e8e8e8;
}
#TB_close{
遊標：指標；
}
#TB_title{
浮動：左；
;
左邊距：10px;
}
#TB_ajaxContent{
填充：2px 15px 15px 15px;
溢位：自動；
}
}
==對齊：居中；
位置：固定；
頂部：50%；
左：0px;
寬度：100%;
溢出：可見；
可見性：可見；
顯示：塊；
z-index:101;
}
/*透過 http://sc.xueit.com下載*/
#TB_loadContent{
margin-left: -125px;
位置：絕對；
頂部：-50px；
左：50%；
寬度：250px；
高度：100px；
可見性：可見；
}


這樣來使用：

複製程式碼代碼如下：代碼如下：

代碼如下：


代碼如下：

代碼如下：

代碼如下：

代碼如下：代碼如下：

碼如下：$.module.showWin({url:"/deposit/clear/" DepositId "?" ( new Date),
title:"清除關閉",
width:550, 高度：350});


效果如下： 關閉的時候，這樣呼叫： 程式碼如下： $.module.hideWin(); 這個彈出層有幾個問題： 1 、採用因為$.load()的方式，所以只能載入同源的url 2、在單頁的情況下，可以很好的定位，如果作為在iframe中彈出，則需要確定top值來輔助定位。這個問題是因為$(window).top()在單一頁面下和iframe下取的值不行同樣導致的，也不知道如何解決。有了解的朋友說一下，不勝感激。