Pop-ups are small windows that appear suddenly on your screen. These pop-ups might contain text, links, buttons or even input fields. Pop-ups are usually used for online advertising purposes. You can them in various sizes and in various positions on the screen. They might contain a link to some external site, promotional content from the same site, register forms, sign up form newsletters forms etc. The website might use popups for different reasons including – increasing sales, increasing registered users on a website or even increasing traffic.
Users might find pop-ups annoying so you need to place them properly. You need to take care that your pop up design is optimized and SEO friendly. Some basic rules would be – to have a definite call to action button and a closing button, not to place misleading content, placing the pop up in proper screen position etc.
Pop-ups may appear on your screen at different times like – immediately after the website loads, a few seconds after the website loads etc. In today’s tutorial, we will learn to create a pop up that appears automatically a few seconds after the page loads completely. This pop up consists of a heading, simple text content, a call to action button and a closing button. For this tutorial, we will need some basic HTML, CSS and Javascript.
Video Tutorial:
Before we begin with the tutorial, you can check the out video tutorial of this topic down below. Also, I have a bunch of other awesome tutorials on my youtube channel. You can check them here.
Project Structure:
The folder structure consists of the project folder – Automatic Pop up. This project folder includes three files – index.html, style.css and script.js. They are the HTML file, the stylesheet and javascript file respectively.
HTML:
After the successful creation of these files, we begin with the coding. Copy the code below and paste it into the HTML file. We start by creating a div with a class name popup. Inside this div, we have a button with id close. An h2 and p element with some demo text and lastly a link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Automatic Popup</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<!--Stylesheets-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="popup">
<button id="close">×</button>
<h2>This Is The Title</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Expedita distinctio fugiat alias iure qui, commodi minima magni ullam aliquam dignissimos?
</p>
<a href="#">Let's Go</a>
</div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>
Â
CSS:
Now coming to the CSS, we add some styles to the pop-up box. Copy the code provided below and paste it into your stylesheet. We apply a basic CSS reset to remove the paddings and margins added to the HTML document by default by the browsers. Next, we add ‘#0f72e5’ as the background-color of the body.
We add some dimensions to the pop-up and centre it with absolute positioning and translate method. We set the text-align to the centre. We position the close button to the top right of the pop-up and add some styles to the link to make it look like a button. Lastly, we set the display of the pop up to ‘none’.
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #0f72e5;
}
.popup{
background-color: #ffffff;
width: 450px;
padding: 30px 40px;
position: absolute;
transform: translate(-50%,-50%);
left: 50%;
top: 50%;
border-radius: 8px;
font-family: "Poppins",sans-serif;
display: none;
text-align: center;
}
.popup button{
display: block;
margin: 0 0 20px auto;
background-color: transparent;
font-size: 30px;
color: #c5c5c5;
border: none;
outline: none;
cursor: pointer;
}
.popup p{
font-size: 14px;
text-align: justify;
margin: 20px 0;
line-height: 25px;
}
a{
display: block;
width: 150px;
position: relative;
margin: 10px auto;
text-align: center;
background-color: #0f72e5;
color: #ffffff;
text-decoration: none;
padding: 5px 0;
}
Â
Javascript:
Coming to javascript, copy the code below and paste it into your javascript file. We add a ‘load’ event listener to the document window. Inside this, we have a setTimeout() that contains a function to set the display of the pop up to ‘block’. The setTimeout() allows us to display the pop up only after some time duration has passed. You can change this duration to suit your need.
Lastly, we add a click event to the close button. The click event triggers a function that sets the display of the pop up to ‘none’ again. And the pop-up is now ready.
window.addEventListener("load", function(){
setTimeout(
function open(event){
document.querySelector(".popup").style.display = "block";
},
1000
)
});
document.querySelector("#close").addEventListener("click", function(){
document.querySelector(".popup").style.display = "none";
});
Â
So what do you think about pop-ups? Are they annoying and should be avoided or are they an important aspect of online advertising. Let me know in the comments down below. Happy Coding!
wow
CD
This is exactly what I’m looking for. I can’t say thank you enough for sharing.
So, I know just enough to screw things up. If I may ask a few question to help me add this to an existing website, I would be grateful. Extremely grateful.
1. In my existing site, I already have ‘style.css’ and ‘script.js’ files…and of course the html file. Do I need to create another of these two or can I add your stylesheet and JavaScript to the existing files? If so, will I need to change the names, a unique name, for example; change “stylesheet” to “stylesheetpopup”? And the same for the JavaScript file? Of course the name change would be applied to references to the file.
2. Are there any other changes relative to this being applied to an existing site?
Thank you again, CD
Looks beautiful
Hi
thank you for your code. How can the JS be adapted to show only once (either with cookie or local store)?
how to pop up window of urls links which are stored in firebase in javascript code.
thank you so much
can you make a video on how you add this comment section
Thanks. this worked out. I had a larger popup so changed the css a bit and used.