Ajax加载数据加载中遮罩

js方法，beforeSend内进行调用遮罩显示

$.ajax({
    url: '${request.contextPath}/statistical/getData',
    type: 'post',
    data: 'columnID=' + $("#ColumnValue").val() + '&deptID=' + $("#DeptValue").val(),
    timeout: 15000,
    beforeSend: function (XMLHttpRequest) {
        $("#loading").css('display', 'block');
    },
    success: function (data, status) {
        $("#loading").css('display', 'none');
        if ("${SearchType}".indexOf("year") >= 0) {
            $("#statistics-time").text("统计日期：" + layDate_start.substring(0, 7) + "~" + layDate_end.substring(0, 7));
        } else {
            $("#statistics-time").text("统计日期：" + layDate_start + "~" + layDate_end);
        }
        creatGrid(eval(ColNamesData), eval(ColModelData), eval(data));
    },
    complete: function (XMLHttpRequest, status) {
        $("#loading").css('display', 'none');
    },
    error: function (XMLHttpRequest, status, errorThrown) {
        $("#loading").css('display', 'none');
    }
});

<div class="loading" id="loading" style="display:none;">
    <div style="position:absolute; left:50%; top:50%; z-index:9999; text-align:center; margin-left:-50px; margin-top:-30px;">
        <img src="${request.contextPath}/assets/image/loading.gif"/>
        <div style="color: #ffffff;;">正在查询...请稍等</div>
    </div>
</div>

.loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    height: 100%;
    background-color: #000000;
    opacity: 0.3;
    filter: alpha(opacity=30);
}