jsポップアップレイヤー（jQueryプラグインフォームにはreLoad機能が付属）

jsポップアップレイヤー（jQueryプラグインフォームにはreLoad機能が付属）_javascriptスキル

WBOY

リリース： 2016-05-16 17:37:19

オリジナル

1289 人が閲覧しました

以前プロジェクトに携わったことがあり、内部のポップアップレイヤーはかなり良いと感じたのですが、今回使用したコード構造に問題があり、リファクタリングしてjQueryプラグイン形式に変更しました。コードは次のとおりです。

(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({"可視性":"可視"} );
$("#TB_loadContent").css({ "display":"block"});
}else{
this.ajaxLayer=$("

gt;

");
$("body").append( this.ajaxLayer);
}
},
_hideAjaxLoad:function(){
this.ajaxLayer.css("visibility","hidden"); ).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); "#TB_window");
var that=this;
if(this.win.length==0){
this.win=$("

;/div>");
$("body") .append(this.win);
this.win.append("

/div>");
$("#TB_close").click(function(){
that. HideWin();
});
}

this. _init(opt);

$("#TB_ajaxContent").load(opt.url) () {
that._hideAjaxLoad();
that.win.slideDown("normal" )
}); 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 コードは次のとおりです:

コードをコピーします

コードは次のとおりです:

 
ボディ {background-color:#fff;} 
html、ボディ {height:100%;} 
html ボディ{font:12px Arial、Helvetica、sans-serif;color:#333333 } 
html>body{font:12px Arial、Helvetica、sans-serif;color:#333333} 
#TB_overlay { 
位置: 絶対; 
トップ: 0; 
左: 0; 
z-インデックス:100; 
幅: 100%; 
高さ: 100%; 
背景色:#CCC; 
フィルター:アルファ(不透明度=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{ 
高さ:25px; 
パディング:10px 25px 10px 0; 
float:right; 
} 
#TB_closeAjaxWindow{ 
パディング:5px 10px 7px 0; 
マージンボトム:1px; 
text-align:right; 
背景色:#e8e8e8; 
} 
#TB_close{ 
カーソル:ポインタ; 
} 
#TB_title{ 
浮動小数点: 左; 
フォントの太さ: 太字; 
マージン左: 10px; 
} 
#TB_ajaxContent{ 
パディング:2px 15px 15px 15px; 
オーバーフロー:自動; 
} 
#TB_load{ 
text-align: center; 
位置: 固定; 
トップ: 50%; 
左: 0px; 
幅: 100%; 
オーバーフロー: 表示されます。 
可視性: 可視; 
表示: ブロック; 
z-インデックス:101; 
} 
/*http://sc.xueit.com でダウンロード*/ 
#TB_loadContent{ 
margin-left: -125px; 
位置: 絶対。 
トップ: -50px; 
左: 50%; 
幅: 250px; 
高さ: 100px; 
可視性: 可視; 
} 

次の使用:

复制代码代码如下:

 
$.module.showWin({url:"/deposit/clear/" destroyId "?" ( new Date), 
title:"清退关闭", 
width:550, 
高さ:350}); 

效果如下：

jsポップアップレイヤー（jQueryプラグインフォームにはreLoad機能が付属）_javascriptスキル

关闭的時候，这样调用：

复制代代码如下:

$.module.hideWin();

この弹出层有几个问题：
1、採用されたのは $.load() の方法であるため、同じソースの URL を追加するだけです
2、单页面にありますこの問題は、$(window).top() が単一のページの下および iframe の下にある値を転送する必要があるためです。知り合いの友人も、これが原因であるとは知りませんでした。