a)页面初始只有一个button，上面显示文字【start Download】
b)点击button后，button文字变为【Downloading】,并弹出模态对话框
模态对话框的body部分，显示下载进度的文字表示【Current Progress】和进度条表示（文字和进度条的进度要一致）button显示【Cancel Download】
c)下载结束后，文字和button内容会有变化 【Complete】【close】
d)点击【close】按钮，关闭对话框，页面上的button文字显示回【Start Download】，如最初所示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
html,body{ 100%;height: 100%;}
.mask{ 100%;height: 100%;background:black;opacity: .4;position: absolute;left:0;top:0;display: none;}
.dialog{ 400px;height: 300px;position: absolute;top:0;left:0;right: 0;bottom: 0;margin:auto;border:2px solid #eee;background:#fff;}
.dialog .header{ 100%;height: 30px;background: #ccc}
.dialog .body{ 100%;height: 150px;}
.dialog .body .txt{height: 50px;}
.dialog .body .load{198px;height: 30px;border:1px solid #000;position: relative;}
.dialog .body .load .box{ 0px;height: 30px;position: absolute;top:0;left: 0;background:red;}
</style>
</head>
<body>
<button class="download">Start Download</button>
<div class="mask">
<div class="dialog">
<div class="header">File Download</div>
<div class="body">
<div class="txt">Current Progress</div>
<div class="load">
<div class="box"></div>
</div>
</div>
<button class="cancel">Cancel Download</button>
</div>
</div>
<script type="text/javascript">
var btn = document.querySelector(".download");
var mask = document.querySelector(".mask");
var load = document.querySelector(".dialog .body .load .box")
var cancel = document.querySelector(".cancel");
function Dialog(mask){
this.mask = mask;
cancel.onclick = () =>{
this.hide();
}
}
Dialog.prototype.show = function(){
this.mask.style.display = "block";
var id = setInterval(function(){
var currentWidth = load.offsetWidth;
var text = document.querySelector(".dialog .body .txt")
currentWidth++;
if(currentWidth == 200){
clearInterval(id);
text.innerHTML = "Complete！"
cancel.innerHTML = "Close"
return;
}
load.style.width = currentWidth + "px";
var a = Math.floor(currentWidth/2);
text.innerHTML = "Current Progress : " + a + "%"
},10)
}
Dialog.prototype.hide = function(){
this.mask.style.display = "none";
btn.innerHTML = "Start Download"
load.style.width = 0;
cancel.innerHTML = "cancel download"
}
btn.onclick = function(){
btn.innerHTML = "Downloading";
var mask = document.querySelector(".mask");
let d = new Dialog(mask);
d.show();
}
</script>
</body>
</html>