前台下载+遮罩层

　　本文章来源一个大哥，美美的后台下载不用，非得搞前台下载，最后这件事情就弄到了我的身上。

 一. 本方法是Ajax调用的type是下载文件不同，data是下载路径（目前支持IE与谷歌别的浏览器没有试过）

  //服务器地址
 data= context.Request.Url.Scheme + "://" + context.Request.Url.Authority + "/Temp/" + filePath.Substring(filePath.LastIndexOf('\') + 1);
 function HttpRequest(type, data) {

        var xhr = new XMLHttpRequest();
        xhr.open("get", data, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            // 请求完成

            //将文件对象交给回掉函数
            var blob = this.response || this.responseText;
            if (blob.size == 0) {
                return;
            }
            var a = document.createElement('a');
            var filename = "";
            if (type == 1) {
                filename = "XXX.pdf";
            }
            else {
                filename = "XXX.docx";
            }
　　　　　　　　//IE浏览器专用 else 其他浏览器
            if (window.navigator.msSaveOrOpenBlob) {
                navigator.msSaveBlob(blob, filename);
            }
            else {
                var url = window.webkitURL.createObjectURL(blob);
                a.href = url;
                a.download = filename;
                a.click();
                window.webkitURL.revokeObjectURL(url);
            }
        };
        xhr.send();

    }

　　 二. 下载中添加了一个简单的遮罩层

    //关闭等待窗口
    function closeWaiting() {
        var bgDiv = document.getElementById("bgDiv");
        var msgDiv = document.getElementById("msgDiv");
        //移除背景遮罩层div
        if (bgDiv != null) {
            document.body.removeChild(bgDiv);
        }
        //移除中间信息提示层div
        if (msgDiv != null) {
            document.body.removeChild(msgDiv);
        }
    }
    //显示等待窗口
    function showWaiting() {
        var msgw, msgh, bordercolor;
        msgw = 500; //提示窗口的宽度
        msgh = 300; //提示窗口的高度
        bordercolor = "#336699"; //提示窗口的边框颜色
        titlecolor = "#99CCFF"; //提示窗口的标题颜色

        var sWidth, sHeight;
        sWidth = $(document).width();
        sHeight = $(document).height();

        //背景遮罩层div
        var bgObj = document.createElement("div");
        bgObj.setAttribute('id', 'bgDiv');
        bgObj.style.position = "absolute";
        bgObj.style.top = "0px";
        bgObj.style.background = "#888";
        bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style = 3, opacity = 25, finishOpacity = 75";
        bgObj.style.opacity = "0.5";
        bgObj.style.left = "0px";
        bgObj.style.width = sWidth + "px";
        bgObj.style.height = sHeight + "px";
        document.body.appendChild(bgObj);

        //信息提示层div
        var msgObj = document.createElement("div");
        msgObj.setAttribute("id", "msgDiv");
        msgObj.setAttribute("align", "center");
        msgObj.style.position = "absolute";
        msgObj.style.background = "white";
        msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif Chroma(Color=#FFFFFF)";
        msgObj.style.border = "1px solid " + bordercolor;
        msgObj.style.width = msgw + "px";
        msgObj.style.height = msgh + "px";
        msgObj.style.top = (sHeight - msgh) / 2 + "px";
        msgObj.style.left = (sWidth - msgw) / 2 + "px";
        document.body.appendChild(msgObj);

        //标题栏
        var title = document.createElement("h4");
        title.setAttribute("id", "msgTitle");
        title.setAttribute("align", "left");
        title.style.margin = "0px";
        title.style.padding = "3px";
        title.style.background = bordercolor;
        title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX = 20, startY = 20, finishX = 100, finishY = 100, style = 1, opacity = 75, finishOpacity = 100); ";
        title.style.opacity = "0.75";
        title.style.border = "1px solid " + bordercolor;
        title.style.height = "20px";
        title.style.font = "14px Verdana, Geneva, Arial, Helvetica, sans-serif";
        title.style.color = "white";
        title.innerHTML = "下载中，请稍候......";
        document.getElementById("msgDiv").appendChild(title);

        //中间等待图标
        var img = document.createElement("img");
        img.style.margin = "90px 0px 10px 0px";
        img.style.width = "100px";
        img.style.height = "100px";
        img.setAttribute("src", "../Images/waiting.gif");
        document.getElementById("msgDiv").appendChild(img);
    }

　　三. 遮罩层等待图片