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处理table表格的代码
Dec 06 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
Oct 24 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
JavaScript事件对象深入详解
Dec 30 Javascript
详解vue 命名视图
Aug 14 Javascript
JS pushlet XMLAdapter适配器用法案例解析
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
使用sockets:从新闻组中获取文章(二)
2006/10/09 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
php文件包含的几种方式总结
2019/09/19 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
JS实现的tab切换选项卡效果示例
2017/02/28 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
优秀英文求职信范文
2015/03/19 职场文书
储备店长岗位职责
2015/04/14 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
Oracle中update和select 关联操作
2022/01/18 Oracle