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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
Prototype Object对象 学习
Jul 12 Javascript
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
Jquery动态改变图片IMG的src地址示例
Jun 25 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
Jul 07 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
关于jQuery库冲突的完美解决办法
May 20 jQuery
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
使用JavaScript实现在页面中显示距离2017年中秋节的天数
Sep 26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
PHP 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
2014/06/30 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
thinkPHP5 ACL用户权限模块用法详解
2017/05/10 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
Js 订制自己的AlertBox(信息提示框)
2009/01/09 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
js获取光标位置和设置文本框光标位置示例代码
2014/01/09 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
详解JavaScript作用域和作用域链
2019/03/19 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
laravel实现中文和英语互相切换的例子
2019/09/30 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python 检查文件mime类型的方法
2018/12/08 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python 弧度与角度互转实例
2020/04/15 Python
Python numpy大矩阵运算内存不足如何解决
2020/11/19 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
校园文明倡议书
2014/05/16 职场文书
设计专业毕业生求职信
2014/06/25 职场文书