点击下载按钮，弹出进度条，下载完成，隐藏进度条

来源：互联网发布：电信网络电视如何设置编辑：程序博客网时间：2024/04/29 15:12

下载文件的时候，如果文件比较大，需要有个提示，这个显示一个进度条的gif图片，点击下载按钮，弹出进度条，下载完成，隐藏进度条：

在html头部加上样式：

<style type="text/css">        .demo{        position:fixed;        z-index: 100;        top: 50%;        left: 50%;        }  </style>

然后在html的最外层div（也就是body下面一行）加上隐藏div

<div id="process" class="demo" style="display:none;"><img src="../../../picture/waitbar.gif" /></div><div id="main-container">主要内容</div>

然后js相应按钮点击事件

$('#export-table-excle').on('click',function(){    //打开进度条    $("#process").css("display","");    $("#main-container").css("opacity","0.3");        demo.ajax.postUrl("/summary/getExcel.serv", params,                function (ret) {                    if (ret != null && ret.code != null && ret.code.code != null && ret.code.code == '0000') {                        //请求成功，关闭进度条                    $("#process").css("display","none");                    $("#main-container").css("opacity","1");                    //返回结果                    var name = ret.bo;                    }                    else {                        //服务器操作失败                    }                    return;                }        );        });

0 0