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 相关文章推荐
JS Timing
Apr 21 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
PHP面向对象编程快速入门
2006/10/09 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
PHP检测用户语言的方法
2015/06/15 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
Yii2框架实现利用mpdf创建pdf文件功能示例
2019/02/08 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JQuery对class属性的操作实现按钮开关效果
2013/10/11 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
js闭包学习心得总结
2018/04/17 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
2020/07/19 Javascript
JS运算符优先级与表达式示例详解
2020/09/04 Javascript
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
Python2与Python3的区别详解
2020/02/09 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
幼儿园中秋节活动方案2013
2014/01/29 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
干部作风整顿个人剖析材料
2014/10/06 职场文书
万里长城导游词
2015/01/30 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
老干部局2015年度工作总结
2015/10/22 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
详解MySQL 用户权限管理
2021/04/20 MySQL