Jqueryを使ってページローディング時のカバー効果を実現します.

全体の説明:
お客様が「照会」ボタンをクリックすると、ページは「待ち中…」というヒントを提供します.同時にページ全体にカバー処理を行い、お客様の体験を向上させます.
使用フレーム
JqueryのBlockUI Pluginを用いて実現しました.公式サイトのアドレス:http://www.malsup.com/jquery/block/
ステップ
1.jsライブラリファイルを参照する
ページの参照ライブラリファイル「BlockUID.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>

check FormAjax()関数に追加します.

//       ，   Jquery BlockUI  
	$('body').block( {
		message : '<h1>    ，   ……</h1>',
		css : {
			border : '3px solid khaki'
		}
	});

3.データのロードが完了したら、カバーをキャンセルします.
ajaxのcompletteにコードを入れる:

$.ajax( {
		type : "POST",
		url : "commitStatisticsData.sp",
		data : {
			dateStart : dateStart,
			dateEnd : dateEnd,
			selectOrgan : selectOrgan
		},
		complete : function() {
			//       ，           
		$.unblockUI();
	},
	success : function(data) {……}
	});

効果図:
BlockUID.jsのダウンロードアドレスは  http://malsup.github.io/jquery.blockUI.js