使用Jquery实现页面加载时的遮罩效果

整体描述：

当客户点击“查询”按钮时，页面回馈一个“等待中……”的提示，同时对整个页面进行遮罩处理，提升客户体验

所使用框架

使用Jquery的BlockUI Plugin实现，官网地址： http://www.malsup.com/jquery/block/

步骤

1.引用js库文件

在页面引用库文件“BlockUI.js"

<!-- 等待界面的引用 -->
		<script type="text/javascript" src="<%=request.getContextPath()%>/page/javascript/acc/BlockUI.js"></script>

2.当点击“查询”按钮时，加入等待界面的代码

查询按钮：

<div class="conditionAlone"><input type="button" id="searchButton" value="查  询" tips="点击此按钮或按下<br/>键盘Enter键查询" onclick="return checkFormAjax()"/></div>

checkFormAjax()函数中添加：

// 用户等待画面，使用 Jquery BlockUI实现
	$('body').block( {
		message : '<h1>正在查询，请稍候……</h1>',
		css : {
			border : '3px solid khaki'
		}
	});

3.数据加载完毕，取消遮罩

在$.ajax的complete中加入代码：

$.ajax( {
		type : "POST",
		url : "commitStatisticsData.sp",
		data : {
			dateStart : dateStart,
			dateEnd : dateEnd,
			selectOrgan : selectOrgan
		},
		complete : function() {
			// 数据加载完毕，取消等待画面的遮罩效果
		$.unblockUI();
	},
	success : function(data) {……}
	});

效果图：

注：BlockUI.js 的下载地址为  http://malsup.github.io/jquery.blockUI.js