jQuery 页面 Mask实现代码

倔驴4

倔驴4

2016-02-19 14:20

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的jQuery 页面 Mask实现代码懂设计的网友们快点来了解吧!
在 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+
展开更多 50%)
分享

猜你喜欢

jQuery 页面 Mask实现代码

Web开发
jQuery 页面 Mask实现代码

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

Web开发
JQuery 遮罩层实现(mask)实现代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

jQuery 页面载入进度条实现代码

Web开发
jQuery 页面载入进度条实现代码

jQuery Div中加载其他页面的实现代码

Web开发
jQuery Div中加载其他页面的实现代码

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

jquery 分页控件实现代码

Web开发
jquery 分页控件实现代码

jQuery 浮动广告实现代码

Web开发
jQuery 浮动广告实现代码

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Delphi图象截取编程示例(4)

Delphi图象截取编程示例(4)

Vagaa哇嘎画时代版资源搜索技巧

Vagaa哇嘎画时代版资源搜索技巧
下拉加载更多内容 ↓