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

以前プロジェクトに携わったことがあり、内部のポップアップレイヤーはかなり良いと感じたのですが、今回使用したコード構造に問題があり、リファクタリングして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});

效果如下：

关闭的時候，这样调用：

复制代代码如下:

$.module.hideWin();

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

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。