遮罩層

CSS

.dinpay-mask {
	position: absolute;
	top: 0px;
	left: 0px;
	filter: alpha(opacity=60);/* IE的透明度 */
	opacity:0.7;/* 透明度 */
	-moz-opacity:0.5;/* firefox的透明度 */
	background-color: #777;    
	z-index: 1002;
	text-align:center;
	margin:0 auto;
	font-size: 20px;
	padding-top: 300px;
	font-weight:bold;
}

JS

// 顯示遮罩層
	function showMask() {
		var $mask = $(".dinpay-mask");
		if ($mask.size() == 0) {
			$("body").append('<div class="dinpay-mask"><img src="' + host + '/img/loading.gif" /><div>執行中，請稍等...</div></div>');
			$mask = $(".dinpay-mask");
		}
		var height = $(document).height();
		var width = $(document).width();
		$mask.css("height", height);
		$mask.css("width", width);
		$mask.show();
	}
	
	// 隱藏遮罩層
	function hideMask() {
		var $mask = $(".dinpay-mask");
		$mask.hide();
	}

調用案例 

showMask();
$.ajax({
    url : '/utilitiesCharge/queryUtilitiesList.htm',
    type:'POST',
    data: {item: typeChange, companyId: companyId, tel: mobile, typeNum: typeCode, billDate: billDate, payAmount: payAmount},
    success:function(data,textStatus,jqXHR){
         hideMask();
         //邏輯處理
     },
    error:function(xhr,textStatus){
        hideMask();
        console.log('錯誤')
        console.log(xhr)
        console.log(textStatus)
     }
});