mask.js
//遮罩
;(function($){
$.fn.mask = function(label, delay, loading, bgcolor){
$(this).each(function() {
if(loading==null){
loading=true;
}
var bgcolorValue="#cccccc";
if(bgcolor){
bgcolorValue=bgcolor;
}
if(delay !== undefined && delay > 0 && delay !=null) {
var element = $(this);
element.data("_mask_timeout", setTimeout(function() { $.maskElement(element, label ,loading, bgcolorValue)}, delay));
} else {
$.maskElement($(this), label, loading, bgcolorValue);
}
});
};
$.fn.unmask = function(){
$(this).each(function() {
$.unmaskElement($(this));
});
};
$.fn.isMasked = function(){
return this.hasClass("masked");
};
$.maskElement = function(element, label,loading ,bgcolor){
if (element.data("_mask_timeout") !== undefined) {
clearTimeout(element.data("_mask_timeout"));
element.removeData("_mask_timeout");
}
if(element.isMasked()) {
$.unmaskElement(element);
}
if(element.css("position") == "static") {
element.addClass("masked-relative");
}
element.addClass("masked");
var maskDiv = $('<div class="loadmask"></div>');
maskDiv.css({
"backgroundColor":bgcolor
})
if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){
maskDiv.height(element.height() + parseInt(element.css("padding-top")) + parseInt(element.css("padding-bottom")));
maskDiv.width(element.width() + parseInt(element.css("padding-left")) + parseInt(element.css("padding-right")));
}
if(navigator.userAgent.toLowerCase().indexOf("msie 6") > -1){
element.find("select").addClass("masked-hidden");
}
element.append(maskDiv);
maskDiv.show();
if(label !== undefined&&label!=null) {
var maskMsgDiv = $('<div class="loadmask-msg" style="display:none;"></div>');
if(loading){
maskMsgDiv.append('<div class="mask_lading">' + label + '</div>');
}
else{
maskMsgDiv.append('<div class="normal">' + label + '</div>');
}
element.append(maskMsgDiv);
maskMsgDiv.css("top", Math.round(element.height() / 2 - (maskMsgDiv.height() - parseInt(maskMsgDiv.css("padding-top")) - parseInt(maskMsgDiv.css("padding-bottom"))) / 2)+"px");
maskMsgDiv.css("left", Math.round(element.width() / 2 - (maskMsgDiv.width() - parseInt(maskMsgDiv.css("padding-left")) - parseInt(maskMsgDiv.css("padding-right"))) / 2)+"px");
maskMsgDiv.show();
}
};
$.unmaskElement = function(element){
if (element.data("_mask_timeout") !== undefined) {
clearTimeout(element.data("_mask_timeout"));
element.removeData("_mask_timeout");
}
element.find(".loadmask-msg,.loadmask").remove();
element.removeClass("masked");
element.removeClass("masked-relative");
element.find("select").removeClass("masked-hidden");
};
})(jQuery);
loadmask.css
/*mask遮罩*/
.loadmask {
z-index: 700;
position: absolute;
top: 0;
left: 0;
-moz-opacity: .4;
opacity: .40;
filter: alpha( opacity = 40);
width:100%;
height:100%;
zoom:1;
display:none;
}.loadmask-msg {
z-index: 20001;
position: absolute;
top: 0;
left: 0;
border: 1px solid #6593cf;
background: #c3daf9;
padding: 2px;
}.loadmask-msg .mask_lading {
padding: 5px 10px 5px 25px;
background: #fbfbfb url('images/loading3.gif') no-repeat 5px 5px;
line-height: 16px;
border: 1px solid #a3bad9;
color: #222;
cursor: wait;
}.loadmask-msg .normal {
padding: 5px 10px 5px 10px;
background-color: #fbfbfb;
line-height: 16px;
border: 1px solid #a3bad9;
color: #222;
display:block;
}.masked {
overflow: hidden !important;
}.masked-relative {
position: relative !important;
}.masked-hidden {
visibility: hidden !important;
}
loading3.gif
使用方法:
<script>
function openMask1(){
$("#content1").mask();
}
function closeMask1(){
$("#content1").unmask();
}
function openMask2(){
$("#content2").mask("当前不可用!",0,false);
}
function closeMask2(){
$("#content2").unmask();
}
function openMask3(){
$("#content3").mask(null,1000,false);
}
function closeMask3(){
$("#content3").unmask();
}
function openMask4(){
$("#content4").mask("正在加载中",null,true);
}
function closeMask4(){
$("#content4").unmask();
}
function openMask5(){
$("#content5").mask("当前不可用!",null,false,"#ffffff");
}
function closeMask5(){
$("#content5").unmask();
}
</script>