Open In App

How to create Popup Box using HTML CSS and JavaScript?

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
3 Likes
Like
Report

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 JavaScript

Output:

PopupGif
Output

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

Similar Reads