How to create Popup Box using HTML, CSS and JavaScript ?

0 0 2 minutes read

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= 
"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>

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, zambiatek 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!