In this article, we will see how to create a pop-up box with the help of HTML, CSS, and JavaScript.
Here we will create a Popup box that is functional through the Popup button, when is clicked the Popbox appears on the screen with the title and close button.
Prerequisites
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.
Project Structure
Project Structure
Example: This example implements a popup using above mentioned approach.
HTML
<!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= <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> |
CSS
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; */} |
Javascript
// 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:
Output
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
