How to Create Popup Box Using Html and Css?
Create a Popup Box with Html, CSS, and JavaScript
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.
50+ HTML, CSS & JavaScript Projects With Source Code
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.
Live Preview Of Popup Modal Box
| Code by | Vidyasheela |
| Project Download | Link Available Below |
| Language used | HTML ,CSS and JavaScript |
| External link / Dependencies | No |
| Responsive | Yes |
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.
Simple Portfolio Website Using Html And Css With Source Code
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.
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
The script tag that points to the app.js, this file is where all our javascript logic will be written in.
HTML Output
You Might Like This:
- Navbar Hover Effect Using Html And Css
- Horizontal Timeline Using Html Css Javascript
- Indian Flag Source Code Html And CSS
- Flip Card Responsive Css
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.
Restaurant Website Using HTML and CSS
.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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
ADVERTISEMENT
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.
ADVERTISEMENT
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 .
ADVERTISEMENT
CSS Output:
ADVERTISEMENT
ADVERTISEMENT
Final Output
You have completed learning how to create a Popup Box with Html, CSS and Vanilla JavaScript
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
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
Which code editor do you use for this Popup Box coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
What is the use of pop up message?
Popup messages are required to notify user about the important term and service of the website.
What are type of popup message?
popup message can be used to show terms and condition of the website,to get the notification for website updates etc.
