jQuery 页面 Mask实现代码
更新时间：2010年01月09日 23:45:05 作者：
何为页面 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看有没有好用一点的分页组件,结果发现有很多,但是都很麻烦,看到了这个叫pagenav的发现相对来说还是很容易上手的,于是就直接用了,在我看来,能解决问题的办法就是好办法.越简单越好.2014-08-08
如果你想你的博客页面某些部分引起读者的注意，你可以使这些部分震动，如广告等等，今天这篇文章将介绍怎样使你的页面中的元素震动起来,感兴趣的你可不要错过了哦，或许对你学习jquery ui 有所帮助2013-02-02
这篇文章主要为大家详细介绍了jquery无缝图片轮播组件封装，支持自动轮播，手动轮播，无缝衔接，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-02-02
文字逐行或多行滚动跑马灯插件，基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)2010-07-07
这篇文章主要介绍了jQuery的内容过滤选择器学习教程,详细地整理了jQuery中四个过滤器的相关函数用法,需要的朋友可以参考下2016-04-04
本篇文章主要是对用jQuery模拟select下拉框的简单示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了jQuery获取页面元素绝对与相对位置的方法,涉及jQuery中offset、position等方法的使用技巧,需要的朋友可以参考下2015-06-06
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
列化中文时出现中文乱码问题，怎么回事呢？下面给大家介绍下jQuery使用serialize()序列化表单时出现中文乱码问题的解决办法，有需要的朋友参考下2016-07-07
这篇文章主要为大家详细介绍了jquery mobile实现可折叠的导航按钮，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
获取页面某一元素的绝对X,Y坐标，可以用offset()方法：（body属性设置margin :0;padding:0;）2010-02-02
最新评论