In this blog post, you'll learn how to create an engaging and effective discount offer timer pop-up box using HTML, CSS, and JavaScript. This popup box will display enticing discount offers along with a countdown timer, having awesome hover effects button, adding a sense of urgency and encouraging visitors to take action immediately.
Key Features:
- Automatic Appearance: The popup box appears automatically with a smooth animation once the page loads.
- Countdown Timer: A countdown timer shows the limited time left to claim the exclusive deal, driving immediate action and preventing hesitation.
- Call-to-Action Button: A visually appealing and interactive call-to-action button, enhanced with captivating hover effects, guides users towards completing the desired action, whether it's making a purchase or signing up for a newsletter.
Video Tutorial on JavaScript Countdown Timer Pop Up.
Pop Up Box For Discount Offer With Timer.
File structure:
- Index.html
- Index.css
I have also used JavaScript that is added within the HMTL file.
Steps to create automatic pop up box that displaying the count down timer.
Step 1: Create design of Pop-Up box.
First, we going to make the design of pop-up box using HTML and CSS.
In the design I have added main_box class which is full width and height background for main pop-up box (class="box").
So that when it loads and if user click outside the box, then the click happens on the background of the box and not on the website content or on any other element of website.
You can also add the functionality to hide or close the pop-up box when user click outside of it means when click happen in background (main_box). I have already shared blog post on close pop-up box when click outside of it.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Offer Pop Up Box | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="main_box">
<div class="box">
<div class="close_button">+</div>
<div class="text_box">
<p>Get 60% off!</p>
<p>Specially for you.</p>
</div>
<p style="font-size: 20px; color: #fff; font-weight: bold; margin-bottom: 10px;">Offer Ends In</p>
<div class="timer_box">
<div class="minute_box">
<p class="minute">5</p>
<p style="font-size: 20px;">min</p>
</div>
<span>:</span>
<div class="second_box">
<p class="second">0</p>
<p style="font-size: 20px;">sec</p>
</div>
</div>
<button type="button">Get The Offer Now <span class="hover_effect"></span></button>
</div>
</div>
</body>
<script>
</script>
</html>
CSS
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #f2f2f2;
}
.main_box{
width: 100%;
height: 100vh;
background-color: transparent;
position: relative;
/* pointer-events: none;
opacity: 0;
transition: 0.5s; */
}
/* .main_box_active{
pointer-events: fill;
opacity: 1;
} */
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #3f51b5;
width: 400px;
text-align: center;
padding: 25px 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px -5px #000;
}
/* .active{
transform: translate(-50% , -50%) scale(1);
pointer-events: fill;
opacity: 1;
} */
.close_button{
position: absolute;
rotate: 45deg;
font-size: 30px;
color: #000;
right: 0px;
top: 0px;
background-color: #fff;
width: 35px;
border-radius: 50%;
margin: 10px;
cursor: pointer;
}
.text_box{
font-size: 30px;
font-weight: bold;
color: #fff;
margin-top: 15px;
margin-bottom: 20px;
}
.timer_box{
display: flex;
align-items: center;
justify-content: center;
}
.minute_box , .second_box{
background-color: #fff;
padding: 15px 10px;
border-radius: 5px;
}
.minute, .second{
font-size: 30px;
font-weight: bold;
}
span{
font-size: 40px;
margin: 0px 5px;
color: #fff;
}
button{
width: 100%;
font-size: 25px;
font-weight: bold;
background-color: darkslategray;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin-top: 20px;
cursor: pointer;
overflow: hidden;
position: relative;
transition: 0.5s;
}
button:hover{
transform: scale(0.9);
}
.hover_effect{
position: absolute;
width: 0px;
height: 50px;
left: -50px;
top: 0;
box-shadow: 0px 0px 10px 5px #fff;
rotate: 30deg;
transition: 0.8s;
}
button:hover .hover_effect{
left: 110%;
}
Output:
Step 2: Add timer countdown functionality.
After creating the design let's add functionality to count down the timer.
We going to create a function for this countdown and call it only when pop up box appears. Because we only want countdown timer to starts when pop up box is visible on screen. So we'll call this function when pop up box is appears.
Also read: Create a simple JavaScript countdown with fade out animation.
JavaScript
let close_button = document.querySelector(".close_button");
let minute_value = document.querySelector(".minute");
let second_value = document.querySelector(".second");
let main_box = document.querySelector(".main_box");
let box = document.querySelector(".box");
let interval = "";
// seconds.
let s = 60;
// minutes.
let m = 5;
function offer_end_timer() {
interval = setInterval(() => {
console.log("seconds");
s--;
second_value.innerHTML = s;
if (s == 0) {
m--;
minute_value.innerHTML = m;
s = 60;
}
if (m == 0) {
clearInterval(interval);
}
}, 1000);
}
Right now, the timer won’t start as we just created the function and didn’t call it. We call it in the next step when we show the pop-up box after hiding it initially.
Step 3: Add automatic Pop-Up functionality to box when page loads.
Now let’s add functionality to automatically pop up the box when page loads or refresh.
For automatic pop up functionality first we need to hide this pop-up box initially, and show after page load by adding separately created classes for show the box.
So, let’s first hide it initially with CSS. We'll hide the box and its full width and height background both.
CSS
.main_box{
width: 100%;
height: 100vh;
background-color: transparent;
position: relative;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%) scale(0.5);
background-color: #3f51b5;
width: 400px;
text-align: center;
padding: 25px 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px -5px #000;
pointer-events: none;
opacity: 0;
transition: 0.5s;
}
And create separate classes to show it. main_box_active class for main_box class (background) and active class for box class (pop up box).
CSS
.main_box_active{
pointer-events: fill;
opacity: 1;
}
.active{
transform: translate(-50% , -50%) scale(1);
pointer-events: fill;
opacity: 1;
}
Now let’s add that newly created classes on page load using JavaScript on load event. we'll add 2 seconds of timer means it show in 2 seconds after page loads, you can add longer delay as 2 seconds is too quick.
JavaScript
// Pop Up
window.onload = function () {
setTimeout(() => {
main_box.classList.add("main_box_active");
box.classList.add("active");
offer_end_timer();
}, 2000);
}
Now after 2 seconds of page load or refresh the pop-up box appears.
Steps 4: Add functionality to hide the box.
Now to close the pop up we just have to remove the above added classes, on click of close button (class="close_button").
JavaScript
close_button.onclick = function () {
main_box.classList.remove("main_box_active");
box.classList.remove("active");
clearInterval(interval);
}
That’s it. You can see demo in above YouTube video.
You may like:
- How to create a pop up model that close when click outside of it using HTML CSS and JavaScript.
- How to create a pop up forms on page loads using JavaScript.
- How to create a simple pop up box using HTML CSS and JavaScript.
- Create a simple tags input box using JavaScript with tags input limit.
- How to create a awesome animated notification message using HTML CSS and JavaScript.
Final code:
So that's how you can create a automatic pop up model using HTML CSS and JavaScript. If you have any question or suggestions feel free to write in the comment section.
Thanks for reading this far.
Share your thoughts.