jquery蒙版控件实现代码


Posted in Javascript onDecember 08, 2010

样式代码:

#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); 
} }
Javascript 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
js DOM 元素ID就是全局变量
Sep 20 Javascript
jQuery仿Excel表格编辑功能的实现代码
May 01 Javascript
完美解决AJAX跨域问题
Nov 01 Javascript
javascript教程之不完整的继承(js原型链)
Jan 13 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
浅谈使用MVC模式进行JavaScript程序开发
Nov 10 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
基于JQuery制作的产品广告效果
Dec 08 #Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 #Javascript
写js时遇到的一些小问题
Dec 06 #Javascript
javascript定义函数的方法
Dec 06 #Javascript
javascript中的一些注意事项 更新中
Dec 06 #Javascript
JavaScript Accessor实现说明
Dec 06 #Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 #Javascript
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
PHP xpath提取网页数据内容代码解析
2020/07/16 PHP
js中cookie的使用详细分析
2008/05/28 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
2014/05/12 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
jquery版轮播图效果和extend扩展
2017/07/18 jQuery
angularjs 获取默认选中的单选按钮的value方法
2018/02/28 Javascript
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
JS实现简易留言板(节点操作)
2020/03/16 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
python提取内容关键词的方法
2015/03/16 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
python调用staf自动化框架的方法
2018/12/26 Python
python实现图片九宫格分割
2021/03/07 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python实现图像拼接功能
2020/03/23 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
书法培训心得体会
2014/01/05 职场文书
高中美术教学反思
2014/01/19 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
2014年工程部工作总结
2014/11/25 职场文书
雾霾停课通知
2015/04/24 职场文书
入党积极分子群众意见
2015/06/01 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers