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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
javascript中substr,substring,slice.splice的区别说明
Nov 25 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 Javascript
Vue-resource拦截器判断token失效跳转的实例
Oct 27 Javascript
Express之托管静态文件的方法
Jun 01 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
我常用的几个类
2006/10/09 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
详解PHP PDO简单教程
2019/05/28 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
javascript天然的迭代器
2010/10/29 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
2014/06/05 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
JS动态生成年份和月份实例代码
2017/02/04 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
详解如何在Javascript和Sass之间共享变量
2019/11/13 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Python创建系统目录的方法
2015/03/11 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
window环境pip切换国内源(pip安装异常缓慢的问题)
2019/12/31 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
Python实现粒子群算法的示例
2021/02/14 Python
雷曼兄弟的五金店:Lehman’s Hardware Store
2019/04/10 全球购物
澳大利亚在线奢侈品时尚零售平台:Azura Runway
2021/01/13 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
历史教育专业个人求职信
2013/12/13 职场文书
大学生学习2014全国两会心得体会
2014/03/13 职场文书
2014春晚主持词
2014/03/25 职场文书
教师教学评估方案
2014/05/09 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
2014年世界艾滋病日演讲稿
2014/11/28 职场文书
初中差生评语
2014/12/29 职场文书
实习介绍信范文
2015/05/05 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
不同意离婚答辩状
2015/05/22 职场文书
JavaScript设计模式之原型模式详情
2022/06/21 Javascript