Jquery 加载等待遮罩层插件

关注

原创最新推荐文章于 2026-02-27 15:20:12 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

jquery.loadmask.js ---jquery一款加载等待插件 jQuery 框架来说肯定没有哪个有 jQuery 用得那么广泛的，尤其是 jQuery 的插件思想吸引了众多贡献者。常常见到这样的应用，点击按钮时显示一个遮罩层，“请稍候，正在处理中......”。应该有不少类似功能的插件，我现在所用的是 BlockUI 插件，还有一个叫做 LoadMask 的插件也能实现。据我相比较而言，觉得 BlockUI 插件要比 LoadMask 强大些，它阅读详情

/**
* 弹出遮罩的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;
}