jquery 마스크 제어 구현 code_jquery

스타일 코드:

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

#div_maskContainer
{
디스플레이: 없음;
}
/*마스크 스타일*/
#div_Mask{
z-index:1000;
filter:alpha(opacity=40); 위치: 절대;
상단:0px;
배경색: #D4D0C8;
/*표시 정보 스타일*/
#div_loading >너비:300px;높이: 60px;위치: 절대;
테두리: 1px 아웃셋 #B4E0F2;
패딩 상단: 40px;
배경 색상: #CCE9F9 ;
z-색인: 10000;
filter:alpha(opacity=100);!important
}



js 제어 코드:

코드 복사

코드는 다음과 같습니다. /**마스크 정보 제어사용법:

1. 마스크.css 참조

2. 마스크.js 참조
3. 호출 방법
var obj=new MaskControl(); //마스크 프롬프트 정보 표시
obj.show("표시된 프롬프트 정보");
//마스크 프롬프트 정보 숨기기
obj.hide()>//프롬프트 정보 표시 및 자동 종료 timeOut 이후(1000은 1초를 나타냄)
obj.autoDelayHide=function(html, timeOut)
*/
function MaskControl() {
this .show=function(html){
var loader=$("#div_maskContainer")
if(loader.length==0){
loader=$("< div id='div_maskContainer '>

");
$ ("body") .append(loader);
self.loader=loader;
var w=$(window).width()
var h=$(window). height();
var divMask=$("#div_Mask")
divMask.css("top",0).css("left",0).css("width",w). css("height" ,h);
vartipDiv=$("#div_loading")
if(html==undefine)
html=""; ;
로더 .show();
var x=(w-tipDiv.width())/2
var y=(h-tipDiv.height())/2; .css("왼쪽",x);
tipDiv.css("top",y);
},
this.hide=function(){
var loader=$("# div_maskContainer");
if(loader.length==0) return ;
loader.remove();
},
this.autoDelayHide=function(html,timeOut){
var loader=$(" #div_maskContainer");
if(loader.length==0) {
this.show(html)
}
else{
vartipDiv=$( "#div_loading") ;
tipDiv.html(html);
}
if(timeOut==undefine) timeOut=3000;
window.setTimeout(this.hide,timeOut); >}

}