In this article, we will learn how to make a simple modal/Popup Box using HTML, CSS, and Javascript. According to Wikipedia, In user interface design for computer applications, a popup box is a graphical control element subordinate to an application's main window.
A popup box provides a mode in which the primary window is disabled but remains visible, with the popup window acting as a child window in front of it.
Before returning to the parent application, users must engage with the popup box. This prevents the main window's operation from being disrupted. Because they frequently display a dialog box, popup boxes are sometimes known as heavy boxes or modal dialogs.
To create a popup box in HTML, CSS, and Javascript what we do is we create a child window with related contents. The window is kept hidden using CSS and upon triggering (either by click event or time interval) it is displayed. The popup box is provided with a close button to close it. Usually, modals are used to popup some offers, alerts, or to show subscribe options.
Follow the code to make a simple popup box in HTML, CSS, and Javascript.
HTML Code For Popup Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup Box with Html</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- welcome , lets make a modal -->
<!-- this button will toggle modal visiblity -->
<button>Click Me</button>
<div class="modal-wrapper">
<div class="modal">
<div class="modal-close">X</div>
<div class="modal-content">
<h2>Hello There</h2>
<p>To get Notification about our update please do subscribe!!!</p>
<a href="#">Follow</a>
</div>
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
For creating the structure for our popup box, we added some important links inside the head and body sections. As the project is made of HTML, CSS, and JavaScript, we have created different files. Now we will link them up to add the CSS and JavaScript inside our popup box.
Now inside our body tag, we will first create a "click me" button using the button tag, and then we will create a modal-wrapper container for our popup box. Using the tag selector, we will add a heading for our popup box, and then using the tag, we will add a paragraph to add the notification inside our popup box.
The script tag that points to the app.js, this file is where all our javascript logic will be written in.
JavaScript Code For Popup Box
let modal = document.querySelector(".modal-wrapper");
let btn = document.querySelector("button");
let close_btn = document.querySelector(".modal-close");
btn.addEventListener("click", display);
// display the modal after 3 second of page load
setTimeout(() => {
display();
}, 3000);
function display() {
modal.style.display = "block";
}
// when the user clicks on X button,close the modal
close_btn.addEventListener("click", hide);
// when user clicks anywhere outside the modal, close modal
window.addEventListener("click", (event) => {
if (event.target == modal) {
modal.style.display = "none";
}
});
function hide() {
modal.style.display = "none";
}
First, we will select the HTML elements from the document using the let keyword and query selector () method. We will store the value in these variables. These elements are what we will use to add the popup functionality inside the popup message.
The style will be used to generate a display function. employing the windows, the display value is set to "block." We set the display to none when we click the addEventListener button.
We will now give the button a "click" event listener. We will show the message after 3 seconds by using the setTimeout() method.
.modal-wrapper {
background: rgba(0, 0, 0, 0.508);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
}
.modal {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
max-width: 300px;
width: 100%;
background: wheat;
padding: 20px;
margin: 35vh auto;
border-radius: 5px;
position: relative;
}
.modal a {
text-decoration: none;
background: crimson;
color: white;
padding: 5px 10px;
border-radius: 5px;
margin: 10px;
}
.modal-close {
color: red;
border: 1px solid black;
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
width: 20px;
border-radius: 5px;
}
button {
background: crimson;
color: white;
padding: 5px 10px;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
}
The background will be set to "black" using the class selector (.modal-wrapper), and the container's position will be set to "fixed" using the position property. The display is set to "none," and the width and height are both 100%. The font family will be set to Arial by the modal.
Using the class selector (.modal-close) the color is set to the red and using the border property we will add a border of 1px solid black. The position is set to the absolute and the border-radius we will add a border radius of 5 px.
Now using the button tag selector we will set the background as "crimson" and using the color property we will set the color as "white" and using the border-radius property we will set a border radius of 5px to the button .
You have completed learning how to create a Popup Box with Html, CSS and Vanilla JavaScript
If you enjoyed reading this post and have found it useful for you, then please give a share with your friends, and follow me to get updates on my upcoming posts. You can connect with me on Instagram.
if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section.
Code By – Vidyasheela
written by – Ninja_webTech
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
Boarding schools in Bangalore