jQuery 遮罩效果

随着互联网的发展，对于系统而言，客户的体验显得越来越至关重要了。今天分享一个jQuery酷炫的遮罩效果，让客户对看似盲目又不知所云的等待漫长终结，给客户比较直观的效果，仅供大家参考。

 

/*****************等待中禁用页面功能*****************/
/**
 * 禁用页面
 */
function forbiddenPage(){
	$("<div class=\"datagrid-mask\" style=\"background:#666666;\"></div>").css({display:"block",width:$("body")[0].offsetWidth+10,height:$(window).height()}).appendTo("body"); 
	$("<div class=\"datagrid-mask-msg\"></div>").html("正在处理，请稍候……").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
	
	
}
/**
 * 释放页面
 * @return
 */
function releasePage(){
	$(".datagrid-mask,.datagrid-mask-msg").hide();
}

 

在表单提交时调用forbiddenPage()函数用于禁用页面。异步操作完成后，再调用forbiddenPage()将该页面释放。

当然，在页面调用前，首先要确保你已将jquery.xx.js文件引入到该页面。

另外说一点，我这里可能不是最好的处理方式，div的创建(appendTo函数)应该和删除(remove函数)是对应的。更有效的处理方式是先判断该页面是否已存在这两个div没有再创建，有的话就直接show()。在释放页面的时候也是如此。如果不想hide()可以直接remove()。