<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<Title> modal frame </ 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> title of the article </ h2>
<Div class = "login"> click Login </ div>
</header>
<div class="modal">
<div class="content">
<div class="close">X</div>
<Div class = "desc"> are logged in, please wait ... </ div>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
<script>
// Get the DOM element
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; // set the counter initial value is 1
let progress = function(){
bar.style.width = i + "%"; // set the width of the progress bar
i ++; // width increments by 1
// if more than 100 illustrates the progress bar has gone full
if(i > 100)
{
clearInterval (stopTimer); // Clear timer function
// reset progress bar width and a counter
bar.style.width = "0%";
i = 0;
modal.style.display = "none"; // Close modal box
// btn content and color change
btn.innerHTML = "login completed";
btn.style.color = "black";
btn.style.cursor = "default";
btn.onclick = null; // bind the click event in Clear btn above
}
}
// add a button to click the button
btn.onclick = function(){
if (btn.innerHTML === "Click Login")
{
modal.style.display = "flex"; // display the modal is reduced to flex, rather than block
stopTimer = setInterval(progress,50);
}
}
// Close button to add the click of a button
close.onclick = function(){
// clear the timer function to reset the counter and progress bar
clearInterval(stopTimer);
bar.style.width = "0%";
i = 0;
// Close the modal box
modal.style.display = "none";
}
</script>
</body>
</html>