Heim > Web-Frontend > js-Tutorial > jquery蒙版控件实现代码_jquery

jquery蒙版控件实现代码_jquery

WBOY
Freigeben: 2016-05-16 18:14:10
Original
1386 Leute haben es durchsucht

样式代码:

复制代码 代码如下:

#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);
}

}


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage