Jquery 加载等待遮罩层插件

/**
 * 弹出遮罩的waitbar
 * loadMsg: 加载的消息字符串
 * waitCls: waitbar的样式(可选参数)
 */
$.fn.showWaitbar = function(loadMsg, waitCls){
var wrap = $(this);
if(!waitCls)  waitCls = "thick";
$("
").css({
display: "block",
width: wrap.width(),
height: wrap.height()
}).appendTo(wrap);
   $("
").html(loadMsg).appendTo(wrap).css({
display: "block",
left: (wrap.width()-$("div.thick-waitbar", wrap).outerWidth())/2,
top: (wrap.height()-$("div.thick-waitbar", wrap).outerHeight())/2
});
};


/**
 * 隐藏遮罩的waitbar
 */
$.fn.hideWaitbar = function(){
var wrap = $(this);
wrap.children("div.thick-waitbar").remove();
wrap.children("div.thick").remove();

};


/*** thick-waitbar样式  ***/
.thick{
position:absolute;
left:0;
top:0;
background:#ccc;
opacity:0.3;
filter:alpha(opacity=30);
display:none;
}
.thick-waitbar{
position:absolute;
cursor:wait;
left:100px;
top:50px;
width:auto;
height:16px;
padding:12px 5px 10px 30px;
background:#fff url('images/pagination_loading.gif') no-repeat scroll 5px 10px;
border:2px solid #6593CF;
font-size:12px;
color:#222;
display:none;
}

你可能感兴趣的:(Web前端)