JQuery 遮罩层实现(mask)实现代码


Posted in Javascript onJanuary 09, 2010

其中有mask()和unmask()这两个方法,这两个方法在指定的元素上添加一个遮罩层和一个提示消息实现,增加客户体验。由于最近做项目的时候,发现有时为了使用这一两个方法需要引入一个比较“庞大”的Extjs进来,觉得有点不划算,于是自己用jquery实现了一个比较简单mask、unmask方法来实现该效果。大家知道jquery是一个优秀的javascript框架,不但体积小而且使用方便,我现在逐渐将系统中使用Extjs实现的代码或组建全部更换成Jquery来实现。好了不多说,上我的代码,这些代码是根据网上的一位朋友实现的documentMask基础上进行整改的。使使用上更加灵活方便了。
(没什么技术含量,旨在为那些需要的朋友提供帮助)

(function(){ 
$.extend($.fn,{ 
mask: function(msg,maskDivClass){ 
this.unmask(); 
// 参数 
var op = { 
opacity: 0.8, 
z: 10000, 
bgcolor: '#ccc' 
}; 
var original=$(document.body); 
var position={top:0,left:0}; 
if(this[0] && this[0]!==window.document){ 
original=this; 
position=original.position(); 
} 
// 创建一个 Mask 层,追加到对象中 
var maskDiv=$('<div class="maskdivgen"> </div>'); 
maskDiv.appendTo(original); 
var maskWidth=original.outerWidth(); 
if(!maskWidth){ 
maskWidth=original.width(); 
} 
var maskHeight=original.outerHeight(); 
if(!maskHeight){ 
maskHeight=original.height(); 
} 
maskDiv.css({ 
position: 'absolute', 
top: position.top, 
left: position.left, 
'z-index': op.z, 
width: maskWidth, 
height:maskHeight, 
'background-color': op.bgcolor, 
opacity: 0 
}); 
if(maskDivClass){ 
maskDiv.addClass(maskDivClass); 
} 
if(msg){ 
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>'); 
msgDiv.appendTo(maskDiv); 
var widthspace=(maskDiv.width()-msgDiv.width()); 
var heightspace=(maskDiv.height()-msgDiv.height()); 
msgDiv.css({ 
cursor:'wait', 
top:(heightspace/2-2), 
left:(widthspace/2-2) 
}); 
} 
maskDiv.fadeIn('fast', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}) 
return maskDiv; 
}, 
unmask: function(){ 
var original=$(document.body); 
if(this[0] && this[0]!==window.document){ 
original=$(this[0]); 
} 
original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
$(this).remove(); 
}); 
} 
}); 
})();

下面是使用实例代码可供参考
代码
<html> 
<head> 
<style> 
body{ 
font-size:12px; 
} 
</style> 
<script src="http://img.3water.com/jslib/jquery/jquery-1.3.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function(){ 
$.extend($.fn,{ 
mask: function(msg,maskDivClass){ 
this.unmask(); 
// 参数 
var op = { 
opacity: 0.8, 
z: 10000, 
bgcolor: '#ccc' 
}; 
var original=$(document.body); 
var position={top:0,left:0}; 
if(this[0] && this[0]!==window.document){ 
original=this; 
position=original.position(); 
} 
// 创建一个 Mask 层,追加到对象中 
var maskDiv=$('<div class="maskdivgen"> </div>'); 
maskDiv.appendTo(original); 
var maskWidth=original.outerWidth(); 
if(!maskWidth){ 
maskWidth=original.width(); 
} 
var maskHeight=original.outerHeight(); 
if(!maskHeight){ 
maskHeight=original.height(); 
} 
maskDiv.css({ 
position: 'absolute', 
top: position.top, 
left: position.left, 
'z-index': op.z, 
width: maskWidth, 
height:maskHeight, 
'background-color': op.bgcolor, 
opacity: 0 
}); 
if(maskDivClass){ 
maskDiv.addClass(maskDivClass); 
} 
if(msg){ 
var msgDiv=$('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">'+msg+'</div></div>'); 
msgDiv.appendTo(maskDiv); 
var widthspace=(maskDiv.width()-msgDiv.width()); 
var heightspace=(maskDiv.height()-msgDiv.height()); 
msgDiv.css({ 
cursor:'wait', 
top:(heightspace/2-2), 
left:(widthspace/2-2) 
}); 
} 
maskDiv.fadeIn('fast', function(){ 
// 淡入淡出效果 
$(this).fadeTo('slow', op.opacity); 
}) 
return maskDiv; 
}, 
unmask: function(){ 
var original=$(document.body); 
if(this[0] && this[0]!==window.document){ 
original=$(this[0]); 
} 
original.find("> div.maskdivgen").fadeOut('slow',0,function(){ 
$(this).remove(); 
}); 
} 
}); 
})(); 
</script> 
</head> 
<body style="width:100%"> 
测试 
<div id="test" style="width:200px;height:100px; border:black 1px solid;"> 
</div> 
<a href="#" onclick="$('#test').mask('DIV层遮罩')">div遮罩</a> 
<a href="#" onclick="$('#test').unmask()">关闭div遮罩</a> 
<a href="#" onclick="$(document).mask('全屏遮罩').click(function(){$(document).unmask()})">全部遮罩</a> 
</body> 
</html>
Javascript 相关文章推荐
JSON 客户端和服务器端的格式转换
Aug 27 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
javascript奇异的arguments分析
Oct 20 Javascript
js有序数组的连接问题
Oct 01 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
微信小程序实现刷脸登录
May 25 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
vue实现列表垂直无缝滚动
Apr 08 Vue.js
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
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 #Javascript
You might like
解析wamp5下虚拟机配置文档
2013/06/27 PHP
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
PHP中使用curl入门教程
2015/07/02 PHP
php获取错误信息的方法
2015/07/17 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
深入理解Python变量的数据类型和存储
2021/02/01 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
中小学生学籍证明
2014/10/25 职场文书
2016年情人节问候语
2015/11/11 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
IDEA 链接Mysql数据库并执行查询操作的完整代码
2021/05/20 MySQL
python如何为list实现find方法
2022/05/30 Python