How to create Popup Box using HTML CSS and JavaScript?

Last Updated : 09 Oct, 2024

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.

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; */
}