<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
header{
display: flex;
}
.login{
width: 50px;
height: 15px;
font-size: 12px;
position: relative;
top: 33px;
left: 15px;
color: rgb(102, 102, 231);
cursor: pointer;
}
.modal{
width: 100%;
height: 100%;
background-color: rgba(170, 164, 164, 0.6);
position: absolute;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.content{
width: 400px;
height: 150px;
background-color: skyblue;
color: white;
}
.close{
width: 95%;
height: 20px;
text-align: right;
padding-right: 10px;
cursor: pointer;
}
.desc{
width: 90%;
height: 50px;
line-height: 50px;
padding-left: 10px;
}
.progress{
width: 90%;
height: 20px;
border: 3px solid white;
position: relative;
top: 5px;
left: 17px;
}
.progress-bar{
width: 0%;
height: 100%;
background-color: white;
}
</style>
</head>
<body>
<header>
<h2>文章标题</h2>
<div class="login">点击登录</div>
</header>
<div class="modal">
<div class="content">
<div class="close">X</div>
<div class="desc">正在登录，请稍后...</div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<script>
// 获取DOM元素
let btn = document.getElementsByClassName("login")[0];
let modal = document.getElementsByClassName("modal")[0];
let close = document.getElementsByClassName("close")[0];
let bar = document.getElementsByClassName("progress-bar")[0];
let stopTimer,i = 1; // 设置计数器，初始值为1
let progress = function(){
bar.style.width = i + "%"; // 设置进度条的宽度
i++; // 宽度每次加1
// 如果大于100 说明进度条已经走满了
if(i > 100)
{
clearInterval(stopTimer); // 清除计时器函数
// 重置进度条的宽度以及计数器
bar.style.width = "0%";
i = 0;
modal.style.display = "none"; // 关闭模态框
// 改变btn的内容和颜色
btn.innerHTML = "登录完成";
btn.style.color = "black";
btn.style.cursor = "default";
btn.onclick = null; // 清除绑定在btn上面的点击事件
}
}
// 给按钮添加点击按钮
btn.onclick = function(){
if(btn.innerHTML === "点击登录")
{
modal.style.display = "flex"; // 将modal的display还原为flex，而不是block
stopTimer = setInterval(progress,50);
}
}
// 给关闭按钮添加点击按钮
close.onclick = function(){
// 清除定时器函数 重置进度条以及计数器
clearInterval(stopTimer);
bar.style.width = "0%";
i = 0;
// 关闭模态框
modal.style.display = "none";
}
</script>
</body>
</html>