| |
<!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> |
| |
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. In excepturi vitae molestiae ducimus ullam? Praesentium dolor, ad aliquam dolore eum dolorem vero quod officia alias perspiciatis eveniet rerum labore non exercitationem saepe quisquam! Quae, amet molestiae, excepturi odio expedita enim eum tenetur nihil suscipit exercitationem accusantium nisi. Aspernatur ipsam ducimus totam dolore quaerat sit quisquam cumque culpa, quo, est nemo alias repellat. Error consectetur esse ipsa et, aliquam iusto dolore repudiandae ipsum quos eum, eius enim fugiat! Fugit eveniet neque nostrum totam, itaque beatae ab velit architecto ipsa. Quae suscipit recusandae ratione dignissimos voluptatibus sed ex voluptate mollitia aperiam quod.</p> |
| |
<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> |