jquery蒙版控件实现代码

162 阅读 0 评论 107 点赞

我是靠谱客的博主追寻电灯胆，最近开发中收集的这篇文章主要介绍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); 
} 

} 