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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
JS分割字符串并放入数组的函数
Jul 04 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
javascript实现获取服务器时间
May 19 Javascript
js密码强度实时检测代码
Mar 02 Javascript
详解如何在你的Vue项目配置vux
Jun 04 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
vue框架搭建之axios使用教程
Jul 11 Javascript
微信小程序实现多选功能
Nov 04 Javascript
关于vue状态过渡transition不起作用的原因解决
Apr 09 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
vue v-model的用法解析
Oct 19 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图片裁剪函数(保持图像不变形)
2014/05/04 PHP
php使用GD创建保持宽高比缩略图的方法
2015/04/17 PHP
PHP常见字符串操作函数与用法总结
2019/03/04 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
2016/09/05 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
微信小程序实战之自定义toast(6)
2017/04/18 Javascript
详解基于vue-cli3快速发布一个fullpage组件
2019/03/08 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
在双python下设置python3为默认的方法
2018/10/31 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
tensorflow 保存模型和取出中间权重例子
2020/01/24 Python
浅谈django channels 路由误导
2020/05/28 Python
如何理解python面向对象编程
2020/06/01 Python
Python进行统计建模
2020/08/10 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
Django model class Meta原理解析
2020/11/14 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
假日旅行社实习自我鉴定
2013/09/24 职场文书
小学美术教学反思
2014/02/01 职场文书
元宵节主持词
2014/03/25 职场文书
2014年组织部工作总结
2014/11/14 职场文书
优秀教研组申报材料
2014/12/26 职场文书
受资助学生感谢信
2015/01/21 职场文书
mysql自增长id用完了该怎么办
2022/02/12 MySQL