jquery蒙版控件实现代码_jquery-js教程-PHP中文网

jquery蒙版控件实现代码_jquery

php中文网

发布： 2016-05-16 18:14:10

原创

1518人浏览过

样式代码：

我的小书坊源码(三层实现)

可以实现用户的在线注册、登陆后可以添加图书、购买图书，可以对图书类别、出版社、价格等进行饼图分析默认帐号/密码：51aspx/51aspx该系统采用三层接口开发，App_Code下为三层结构的代码文件，适合三层入门者学习使用数据绑定控件使用的是GridView，顶部公用文件采用了UserControl用户控件调用DB_51aspx下为Sql数据库文件，附件即可【该源码由51aspx提供】

查看详情

复制代码代码如下:

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

} 