原创jquery蒙版控件

样式代码：

 

代码

#div_maskContainer
{
    display :  none ;
}
/* 蒙版样式 */
#div_Mask {
    z-index : 1000 ;
    filter : alpha(opacity=40) ;
    position :  absolute ;
    left : 0px ;
    top : 0px ;
    background-color :  #D4D0C8 ;
}
/* 显示信息样式 */
#div_loading {
    width : 300px ; height :  60px ; position :  absolute ;
    border :  1px outset #B4E0F2 ;
    padding-top :  40px ;
    text-align :  center ;
    background-color :  #CCE9F9 ;
    z-index :  10000 ;
    filter : alpha(opacity=100) ; !important
}

 

 

js控件代码：

 

代码

/* *
蒙版信息控件
用法：
1.引用 mask.css
2.引用 mask.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'><div id='div_Mask' ></div><div id='div_loading' ></div></div> " );
            $( " 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);
         var  tipDiv = $( " #div_loading " );
         if (html == undefined)
            html = "" ;
        tipDiv.html(html);
        loader.show();
         var  x = (w - tipDiv.width()) / 2;
         var  y = (h - tipDiv.height()) / 2;
        tipDiv.css( " left " ,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 {
             var  tipDiv = $( " #div_loading " );
            tipDiv.html(html);
        }
         if (timeOut == undefined) timeOut = 3000 ;
            window.setTimeout( this .hide,timeOut);
    }
    
}

 

 

转载于:https://www.cnblogs.com/yg_zhang/archive/2010/12/07/1898930.html