html蒙版源代码,jquery蒙版控件实现代码_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=$("

");

$("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);

}

}

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

相关标签：蒙版控件