How to create Popup Box using HTML CSS and JavaScript?
Last Updated :
09 Oct, 2024
Improve
Creating a popup box with HTML, CSS, and JavaScript improves user interaction on a website. A responsive popup appears when a button is clicked, featuring an HTML structure, CSS for styling, and JavaScript functions to manage visibility.
Approach
- Create the Popup structure using HTML tags, Some tags are used in this project like <h1>,<div>,<p>.
- Add the different styling properties using CSS to style your Popup structure, give padding, margins, and font size accordingly, and add some hover, and transition properties for look and feel.
- In JavaScript, first, get button elements through their id or class and then apply addEventListener on the Popup button as well as the Close button.
- "Click" event is used, popup box appears while clicking on the popup button.
- A popup box appears with "You have Subscribed" and a Close button.
- The close button is used to remove the popup box by changing the display property to none.
Example: This example implements a popup using above-mentioned approach.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div class="heading">
<h1>GeeksForGeeks</h1>
</div>
<h2>
How to create Popup Box using
HTML,CSS and JS
</h2>
<p id="sub-p">
Click below button for Popup
</p>
<div class="outer">
<div class="popup">
<i class="far fa-check-circle"></i>
<h2>You have Subscribed</h2>
<br />
<button id="closebtn">Close</button>
</div>
<button id="showbtn">Popup</button>
</div>
<br />
<script src="./script.js"></script>
</body>
</html>
body {
background-color: #09dbd450;
}
.outer {
display: flex;
justify-content: center;
align-items: center;
height: 400px;
}
.heading {
display: flex;
align-items: center;
height: 28px;
justify-content: center;
}
h1,
h2 {
text-align: center;
}
h1 {
color: green;
background-color: white;
display: inline;
}
h2 {
color: rgb(139, 52, 52);
}
p {
text-align: center;
font-weight: bold;
}
.popup {
background-color: #fafafa;
width: 366px;
height: 222px;
border-radius: 26px;
text-align: center;
display: none;
transition: all 0.5s ease;
transition-duration: 1s;
}
#showbtn {
margin: 200px auto;
}
#closebtn {
margin-top: 3px;
}
.popup button {
margin-top: 6px;
}
button {
background-color: rgb(0, 0, 0);
color: white;
border-radius: 5px;
height: 36px;
width: 77px;
border: none;
transition-duration: 0.5s;
font-size: 17px;
}
.far.fa-check-circle {
color: blue;
font-size: 37px;
margin-top: 7px;
}
button:hover {
background-color: rgb(113, 140, 139);
color: white;
/* transition-delay: 0.4s; */
}
// To access the show button element
let showbtn = document.getElementById("showbtn");
// To access the Close button element
let closebtn = document.getElementById("closebtn");
// To acces the popup element
let popup = document.querySelector(".popup");
let subp = document.getElementById("sub-p");
// To show the popup on click
showbtn.addEventListener("click", () => {
popup.style.display = "block";
showbtn.style.display = "none";
document.body.style.backgroundColor = "#9EA9B1";
subp.style.display = "none";
});
// To close the popup on click
closebtn.addEventListener("click", () => {
popup.style.display = "none";
showbtn.style.display = "block";
document.body.style.backgroundColor = "#09dbd450";
subp.style.display = "block";
});
Output:
