Open In App

How to Create Popup Box using HTML and CSS?

Last Updated : 28 Jun, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Popup boxes are widely used in web design, with nearly 80% of modern websites utilizing them for alerts, forms, confirmations, or user guidance. They enhance interactivity and improve user experience.

Below are three common methods to create a popup box using only HTML and CSS:

1. Using Display Property

This method toggles the popup's visibility by changing its CSS display property.

index.html
<html>
<head>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .popup-content {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
        .popup:target {
            display: flex;
        }
    </style>
</head>
<body>
    <a href="#popup" style="padding: 10px 20px; background-color: #007BFF; 
                            color: #fff; text-decoration: none; border-radius: 5px;">Open Popup</a>
    <div id="popup" class="popup">
        <div class="popup-content">
            <h2>Popup Title</h2>
            <p>This is a simple popup box.</p>
            <a href="#" style="display: inline-block; margin-top: 10px; padding:
                               5px 10px; background-color: #dc3545; color: #fff; text-decoration:
                               none; border-radius: 3px;">Close</a>
        </div>
    </div>
</body>
</html>


Code Overview:

  • Visibility Control: The .popup element is initially hidden with display: none; and becomes visible when its id matches the URL fragment (:target).
  • Centered Popup: Flexbox properties center the popup content both vertically and horizontally within the viewport.

2. Using JavaScript EventListener

This approach uses JavaScript to dynamically show and hide the popup based on user interactions.

HTML
<html >
<head>
    <style>
        .popup {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .popup-content {
            background: #fff;
            padding: 20px;
            border-radius: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <button id="openPopup" style="padding: 10px 20px; background-color: #28a745; 
                                  color: #fff; border: none; border-radius: 5px;">Open Popup</button>
    <div id="popup" class="popup">
        <div class="popup-content">
            <h2>Popup Title</h2>
            <p>This popup is controlled with JavaScript.</p>
            <button id="closePopup" style="margin-top: 10px; padding:
                                           5px 10px; background-color: #dc3545; color: #fff; 
                                           border: none; border-radius: 3px;">Close</button>
        </div>
    </div>
    <script>
        const openPopup = document.getElementById('openPopup');
        const closePopup = document.getElementById('closePopup');
        const popup = document.getElementById('popup');

        openPopup.addEventListener('click', () => {
            popup.style.display = 'flex';
        });

        closePopup.addEventListener('click', () => {
            popup.style.display = 'none';
        });

        window.addEventListener('click', (event) => {
            if (event.target === popup) {
                popup.style.display = 'none';
            }
        });
    </script>
</body>
</html>


Code Overview:

  • Event Listeners: JavaScript addEventListener methods handle opening and closing the popup based on user clicks.
  • Overlay Click to Close: Clicking outside the popup content (on the overlay) closes the popup, enhancing usability.

3. Using JavaScript SweetAlert Library

SweetAlert provides a simple way to create beautiful popup boxes with minimal code.

index.html
<html>
<head>
     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        button {
            padding: 10px 20px;
            background-color: #17a2b8;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="showPopup()">Show Popup</button>
    <script>
        function showPopup() {
            Swal.fire({
                title: 'Welcome!',
                text: 'This is a SweetAlert popup.',
                icon: 'info',
                confirmButtonText: 'Cool'
            });
        }
    </script>
</body>
</html>

Code Overview:

  • External Library: SweetAlert is loaded via a CDN to provide pre-styled popup functionality.
  • Customizable Alerts: The Swal.fire method displays a popup with specified title, text, and icon.

How to create popup box using HTML and CSS?

Similar Reads