html 页面 ajax 方法显示遮罩

showLoading.css 样式：

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:998;width:100%;height:100%;_padding:0 50% 0 0;background:#333333;display:none;}
.showbox{position:fixed;top:0;left:50%;z-index:9999;opacity:0;filter:alpha(opacity=0);margin-left:-80px;}
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
*html .showbox,*html .overlay{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
#AjaxLoading{color:#37a;font-size:12px;font-weight:bold;}
/*#AjaxLoading div.loadingWord{width:300px;height:50px;line-height:50px;border:0px solid #000000;background:#65eae6;}*/
#AjaxLoading div.loadingWord{}
#AjaxLoading img{margin:10px 15px;float:left;display:inline;}

html 代码,辅助两个div

<body>   
 <!--遮罩 开始-->
        <div class="overlay"></div>
        <div id="AjaxLoading" class="showbox">
            <div class="loadingWord"><img src="/resource/jQuery.showLoading/images/loading2.gif" /></div>
        </div>
  <!--遮罩 结束-->
</body>

JS代码

<script type="text/javascript">

        //----判断当前页面是否加载状态 开始 ----
        document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法.
        function subSomething() {
            if (document.readyState != 'complete') //当页面加载状态
            {
                //----显示遮罩 开始----
                $(".overlay").css({ 'display': 'block', 'opacity': '0.8' });
                $(".showbox").stop(true).animate({ 'margin-top': '300px', 'opacity': '1' }, 200);
                $('#AjaxLoading').show()
                //----显示遮罩 结束----
            }
        }
        //----判断当前页面是否加载状态 结束 ----
        $(function () {
            jQuery.ajax({
                url: 'test.ashx',
                type: "POST",
                dataType: "json",
                data: { "cptypeid": cptypeid, "cpnameid": cpnameid },
                success: function (result) {
                    if (result.success) { }
                    //----隐藏遮罩 开始----
                    $(".showbox").stop(true).animate({ 'margin-top': '250px', 'opacity': '0' }, 400);
                    $(".overlay").css({ 'display': 'none', 'opacity': '0' });                    
                    $('#AjaxLoading').hide()