Jquery 加载等待遮罩层插件

/**
 * 弹出遮罩的waitbar
 * loadMsg: 加载的消息字符串
 * waitCls: waitbar的样式(可选参数)
 */
$.fn.showWaitbar = function(loadMsg, waitCls){
var wrap = $(this);
if(!waitCls)  waitCls = "thick";
$("<div class=\""+waitCls+"\"></div>").css({
display: "block",
width: wrap.width(),
height: wrap.height()
}).appendTo(wrap);
   $("<div class=\"thick-waitbar\"></div>").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;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值