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();
}
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,
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使用示例：
View Code
<bodystyle=" 100%">
测试
<divid="test"style=" 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>