首页 / JQUERY / jquery蒙版控件实现代码

jquery蒙版控件实现代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery蒙版控件实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1665字，纯文字阅读大概需要3分钟。

内容图文

样式代码：
代码如下:

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

}

内容总结

以上是互联网集市为您收集整理的jquery蒙版控件实现代码全部内容，希望文章能够帮你解决jquery蒙版控件实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/370044.html

来源：【匿名】