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 相关文章推荐
jquery $.ajax入门应用二
Nov 19 Javascript
jquery tab插件精简版分享
Sep 10 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
JavaScript装饰器函数(Decorator)实例详解
Mar 30 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
JS 基本概念详细介绍
Oct 16 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
Extjs TriggerField在弹出窗口显示不出问题的解决方法
Jan 08 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
srcElement表格样式
2006/09/03 Javascript
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
2010/02/11 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
40个新鲜出炉的jQuery 插件和免费教程[上]
2012/07/24 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
初识Javascript小结
2015/07/16 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
Vue.js 表单控件操作小结
2018/03/29 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
详解Ubuntu安装angular-cli遇到的坑
2018/09/08 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
浅析Python迭代器的高级用法
2020/07/16 Python
体育教育个人自荐信范文
2013/12/01 职场文书
运动会800米加油稿
2014/02/22 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
意向书范本
2014/07/29 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
python中的被动信息搜集
2021/04/29 Python
Django基础CBV装饰器和中间件
2022/03/22 Python
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers