집 >웹 프론트엔드 >JS 튜토리얼 >js 팝업 레이어(jQuery 플러그인 형식에는 reLoad 기능이 제공됨)_javascript 기술

js 팝업 레이어(jQuery 플러그인 형식에는 reLoad 기능이 제공됨)_javascript 기술

WBOY원래의: 2016-05-16 17:37:191298검색

이전에 프로젝트를 진행했는데 내부 팝업 레이어가 꽤 좋다고 느꼈는데, 코드 구조에 문제가 있어서 이번에 사용해서 리팩토링해서 jQuery 플러그인 형태로 변경했는데, reLoad 기능을 추가했는데 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(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.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("

$("#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 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

 
본문 {배경색:#fff;} 
html, 본문 {높이:100%;} 
html 본문{글꼴: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; 
플로트:오른쪽; 
} 
#TB_closeAjaxWindow{ 
패딩:5px 10px 7px 0; 
여백-하단:1px; 
텍스트 정렬:오른쪽; 
배경색:#e8e8e8; 
} 
#TB_close{ 
커서:포인터; 
} 
#TB_title{ 
float: 왼쪽; 
글꼴 두께: 굵게; 
왼쪽 여백: 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/"depositId "?"(새 날짜), 
title:"清退关闭", 
너비:550, 
높이:350}); 

效果如下：

js 팝업 레이어(jQuery 플러그인 형식에는 reLoad 기능이 제공됨)_javascript 기술

关闭的时候，这样调用：

复主代码代码如下:

$.module.hideWin();

성명：

이전 기사：jQuery를 사용하는 방법에는 정확한 일치를 달성하기 위한 필터가 포함되어 있습니다_jquery다음 기사：jQuery를 사용하는 방법에는 정확한 일치를 달성하기 위한 필터가 포함되어 있습니다_jquery

js 팝업 레이어(jQuery 플러그인 형식에는 reLoad 기능이 제공됨)_javascript 기술

관련 기사