How To Automatically Show and Hide Popup Modal with setInterval and setTimeout in JavaScript
A simple way to build a modal that automatically shows up after a set time and closes after a set time using Vanilla Javascript.
In this article, we will learn how to build a simple modal that appears and disappears after a set time interval to give the feeling of a social proof notification. The modal appears after a given number of seconds and then disappears for another given number of seconds, this will be a continuous event. The data the popup carries will change on every appearance.
You might ask, what is a Social proof notification? A social proof notification is a way to capture the attention of website visitors and influence or move them to take action. It helps to build website conversion. For example, have you ever been on an eCommerce website and you get popups telling you that someone just purchased an item or their most popular item has a limited number left? This popups aim is to create urgency and move you to take action immediately.
Now, with that being said, let’s get right into it. Since this is a simple HTML project, you don’t need anything special to get started. Creating your HTML, CSS, and JavaScript files is all that is needed. Connect them up to make sure everything works.
For the HTML, we’re going to be building something very simple. Here is the code below;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>PopUp</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body class="main-wrapper">
<h3> A simple HTML Page </h3>
<!-- Pop Up Modal -->
<div class="popup-section">
<div class="popup-text">
<p class="popup-name" id="userName"> </p>
<h5 class="popup-bold" id="itemName"> </h5>
</div>
</div>
</body>
<script src="app.js"></script>How you decide to style the page and your popup solely depends on you, I will focus on the styling of the popup. We will use CSS keyframes for the transition effects of the popup. The popup modal should have its opacity at 0 initially and then after a few seconds, the opacity should change to 1. The position should also be fixed in the bottom right corner of the page.
/* POP-UP Modal*/
.popup-section {
display: block;
position: fixed;
z-index: 1;
right: 0rem;
top: 83%;
margin-top: 1rem;
margin-right: 2rem;
transform: scale(1.2);
opacity: 0;
transition: all 300ms ease-in-out;
}
/* Show POP-UP Modal */
.show-popup {
opacity: 1;
transform: scale(1);
animation: bounceIn 0.6s linear;
}
/* POP-UP Modal transitions */
@keyframes bounceIn {
0%,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03);
}
40% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.01, 1.01, 1.01);
transform: scale3d(1.01, 1.01, 1.01);
}
80% {
-webkit-transform: scale3d(0.97, 0.97, 0.97);
transform: scale3d(0.97, 0.97, 0.97);
}
to {
opacity: 1;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
}
.popup-text {
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 10rem;
width: fit-content;
height: 5rem;
padding: 12px;
background: rgba(21, 0, 0, 0.689);
border-radius: 10px 0px 0px 10px;
}
.popup-text .popup-name {
font-size: 1rem;
font-weight: 400;
font-family: "Segoe UI", "san-serif";
width: max-content;
margin-bottom: 0.5rem;
}
.popup-text .popup-bold {
font-family: var(--body-font);
font-weight: 400;
font-size: 1.25rem;
}
@media screen and (min-width: 768px) {
.popup-text .popup-name{
font-size: 1.25rem;
}
.popup-text .popup-bold {
font-size: 1.45rem;
}
}Now for the important part, first we will need to create an array with the data we want to display on the webpage.
const array = [
{
id: 1,
name: "Anna Nowak",
number: "350",
item: "Socks",
},
{
id: 2,
name: "Maria Kowalski",
number: "150",
item: "Sweaters",
},
{
id: 3,
name: "Jan Wiśniewski",
number: "500",
item: "Socks",
},
{
id: 4,
name: "Piotr Wójcik",
number: "50",
item: "Caps",
},
{
id: 5,
name: "Kazimierz Kowalczyk",
number: "13",
item: "Sweaters",
},
{
id: 6,
name: "Andrzej Kamiński",
number: "3",
item: "Socks",
},
{
id: 7,
name: "Magdalena Grabowski",
number: "10",
item: "Caps",
},
{
id: 8,
name: "Krzysztof Nowakowski",
number: "30",
item: "Sweaters",
},
{
id: 9,
name: "Ewa Lewandowski",
number: "7",
item: "Earrings",
},
{
id: 10,
name: "Stanislaw Szymański",
number: "8",
item: "Socks",
},
]After which we will get the ids that the data will be passed to.
const username = document.querySelector("#userName");
const itemName = document.querySelector("#itemName");
const popup = document.querySelector(".popup-section");The function that will make the modal appear and disappear will be based on a set time interval. We’re going to you some javascript functions, setInterval, and setTimeout.
- setInterval is to set the number of seconds before which the popup will show, so we want the popup to wait 16 seconds which equals 16,000 milliseconds before showing up.
- setTimeout is to set the number of seconds the popup will wait before disappearing. We will set it to 10 seconds which equals 10,000 milliseconds.
Remember, the popup is meant to continuously appear and disappear but with different data from the array.
Inside our setInterval function, we will call the popup to show, and also declare our data. The popup will only show after 16 seconds and it will show with a random item each time. The variable ‘random’ is to get random items from our array.
let id = setInterval(function () {
// get random data from the array
var random = array[Math.floor(Math.random() * array.length)];
//assign the different data we have in our array to the html classnames
username.innerHTML = random.name + " " + 'just bought';
itemName.innerHTML = random.number + " " + random.item;
//add "show-popup" after 16000 milliseconds
popup.classList.add("show-popup");
//after the popup shows, wait for 10000 milliseconds then make it
//disappear by removing the "show-popup" class name you added before
setTimeout(() => {
if (popup.classList.contains("show-popup")) {
popup.classList.remove("show-popup");
}
}, 10000);
}, 16000);With this, you’ll have your popup working just fine.
