jQuery 页面 Mask实现代码


Posted in Javascript onJanuary 09, 2010

在 Ajax 应用中,显示一个 Dialog(以 Div 方式显示)前,都会先建一个 Mask。因为经常会用到,所以写成了一个 jQuery 插件,方便自己的使用。

(function($){ 
$.extend({ 
documentMask: function(options){ 
// 扩展参数 
var op = $.extend({ 
opacity: 0.8, 
z: 10000, 
bgcolor: '#000' 
}, options); // 创建一个 Mask 层,追加到 document.body 
$('<div class="jquery_addmask"> </div>').appendTo(document.body).css({ 
position: 'absolute', 
top: '0px', 
left: '0px', 
'z-index': op.z, 
width: $(document).width(), 
height: $(document).height(), 
'background-color': op.bgcolor, 
opacity: 0 
}).fadeIn('slow', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}).click(function(){ 
// 单击事件,Mask 被销毁 
$(this).fadeTo('slow', 0, function(){ 
$(this).remove(); 
}); 
}); 
return this; 
} 
}); 
})(jQuery);

使用方法
$.documentMask(); 
$.documentMask({ 
'opacity': 0.6, 
'bgcolor': '#E79673', 
'z': 1000000 
});

参数中,z 表示 z-index。

兼容性
支持 IE 6.0+, FF2+, Safari 3.1+, Opera 9.0+

Javascript 相关文章推荐
jQuery 表格插件整理
Apr 27 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
JavaScript数据类型详解
Apr 01 Javascript
JavaScript判断IE版本型号
Jul 27 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
详解vue为什么要求组件模板只能有一个根元素
Jul 22 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
通过JS判断网页是否为手机打开
Oct 28 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
JQuery 遮罩层实现(mask)实现代码
Jan 09 #Javascript
Javascript UrlDecode函数代码
Jan 09 #Javascript
JavaScript 页面坐标相关知识整理
Jan 09 #Javascript
了解jQuery技巧来提高你的代码
Jan 08 #Javascript
在html页面上拖放移动标签
Jan 08 #Javascript
利用js获取服务器时间的两个简单方法
Jan 08 #Javascript
JavaScript中的集合及效率
Jan 08 #Javascript
You might like
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
vue实现图片上传功能
2020/05/28 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python中正则表达式详解
2017/05/17 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
Annoushka英国官网:英国奢侈珠宝品牌
2018/10/20 全球购物
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
数学系毕业生的自我评价
2014/01/10 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
销售团队口号大全
2014/06/06 职场文书
应用心理学专业求职信
2014/08/04 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书