jQuery 页面 Mask实现代码
发布时间：2013-09-01 编辑：jiaochengji.com
何为页面 Mask (遮罩)？看过 jQuery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。
何为页面 Mask (遮罩)？看过 jquery 的 Lightbox 插件的一定不会陌生。就是在页面上建一个透明层遮盖住页面的全部内部。
在 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+
复制代码 代码如下:
(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+
您可能感兴趣的文章：
jQuery 页面 Mask实现代码
jQuery插件 LoadMask
CSS制作11种风格不同的特效文字
Jquery easyui 下loaing效果示例代码
jquery实现加载等待效果示例
JQuery 遮罩层实现(mask)实现代码
Jquery 高亮显示文本中重要的关键字
jQuery之浮动窗口实现代码(两种方法)
jQuery插件屏蔽单个元素禁止点击的实现代码
CSS3中遮罩使用实例教程
[关闭]