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 相关文章推荐
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
js 索引下标之li集合绑定点击事件
Jan 12 Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
ant-design-vue中tree增删改的操作方法
Nov 03 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
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
JQuery文本框高亮显示插件代码
2011/04/02 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
简单谈谈关于 npm 5.0 的新坑
2017/06/08 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
jquery实现商品sku多属性选择功能(商品详情页)
2019/12/20 jQuery
python安装以及IDE的配置教程
2015/04/29 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
python绘制双柱形图代码实例
2017/12/14 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
如何利用python查找电脑文件
2018/04/27 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python字典一键多值实例代码分享
2019/06/14 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
python 多线程中join()的作用
2020/10/29 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
大学生村官工作感言
2014/01/10 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
西双版纳导游词
2015/02/03 职场文书
重阳节慰问信
2015/02/15 职场文书
2015年机关后勤工作总结
2015/05/26 职场文书
沂蒙六姐妹观后感
2015/06/08 职场文书
生产车间管理制度
2015/08/04 职场文书
大学新生入学感想
2015/08/07 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers