遮罩层实现
http://www.oschina.net/code/snippet_98719_7689
http://hi.baidu.com/bluelotus7/item/b8f467f4e3a982dd6225d269
-------------------------------------
http://hi.baidu.com/bluelotus7/item/b8f467f4e3a982dd6225d269
(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();
}
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();
});
}
});
})();
<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()">关闭遮罩</a>
<a href="#" onclick="$(document).mask('全部遮罩').click(function(){$(document).unmask()})">全部遮罩</a>
</body>
-------------------------------------
/* * Document : mask 1.1 * Created on : 2011-12-11, 14:37:38 * Author : GodSon * Email : [email protected] * Link : www.btboys.com * */ (function($){ function init(target,options){ var wrap = $(target); if($("div.mask",wrap).length) wrap.mask("hide"); wrap.attr("position",wrap.css("position")); wrap.attr("overflow",wrap.css("overflow")); wrap.css("position", "relative"); wrap.css("overflow", "hidden"); var maskCss = { position:"absolute", left:0, top:0, cursor: "wait", background:"#ccc", opacity:options.opacity, filter:"alpha(opacity="+options.opacity*100+")", display:"none" }; var maskMsgCss = { position:"absolute", width:"auto", padding:"10px 20px", border:"2px solid #ccc", color:"white", cursor: "wait", display:"none", borderRadius:5, background:"black", opacity:0.6, filter:"alpha(opacity=60)" }; var width,height,left,top; if(target == 'body'){ width = Math.max(document.documentElement.clientWidth, document.body.clientWidth); height = Math.max(document.documentElement.clientHeight, document.body.clientHeight); }else{ width = wrap.outerWidth() || "100%"; height = wrap.outerHeight() || "100%"; } $('<div class="mask"></div>').css($.extend({},maskCss,{ display : 'block', width : width, height : height, zIndex:options.zIndex })).appendTo(wrap); var maskm= $('<div class="mask-msg"></div>').html(options.maskMsg).appendTo(wrap).css(maskMsgCss); if(target == 'body'){ left = (Math.max(document.documentElement.clientWidth,document.body.clientWidth) - $('div.mask-msg', wrap).outerWidth())/ 2; if(document.documentElement.clientHeight > document.body.clientHeight){ top = (Math.max(document.documentElement.clientHeight,document.body.clientHeight) - $('div.mask-msg', wrap).outerHeight())/ 2; }else{ top = (Math.min(document.documentElement.clientHeight,document.body.clientHeight) - $('div.mask-msg', wrap).outerHeight())/ 2; } }else{ left = (wrap.width() - $('div.mask-msg', wrap).outerWidth())/ 2; top = (wrap.height() - $('div.mask-msg', wrap).outerHeight())/ 2; } maskm.css({ display : 'block', zIndex:options.zIndex+1, left : left, top : top }); setTimeout(function(){ wrap.mask("hide"); }, options.timeout); return wrap; } $.fn.mask = function(options){ if (typeof options == 'string'){ return $.fn.mask.methods[options](this); } options = $.extend({}, $.fn.mask.defaults,options); return init(this,options); }; $.mask = function(options){ if (typeof options == 'string'){ return $.fn.mask.methods[options]("body"); } options = $.extend({}, $.fn.mask.defaults,options); return init("body",options); }; $.mask.hide = function(){ $("body").mask("hide"); }; $.fn.mask.methods = { hide : function(jq) { return jq.each(function() { var wrap = $(this); $("div.mask",wrap).fadeOut(function(){ $(this).remove(); }); $("div.mask-msg",wrap).fadeOut(function(){ $(this).remove(); wrap.css("position", wrap.attr("position")); wrap.css("overflow", wrap.attr("overflow")); }); }); } }; $.fn.mask.defaults = { maskMsg:'\u52a0\u8f7d……', zIndex:100000, timeout:30000, opacity:0.6 }; })(jQuery);