How To Create an Alert Message Box using CSS?

How to Create Popup Box using HTML and CSS?

Last Updated : 28 Jun, 2025

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?

How To Create an Alert Message Box using CSS?

S

sourabhsahu33

Improve

Article Tags :

Similar Reads

How to Create a Modal Box using HTML CSS and JavaScript?

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m

How to Create Neon Light Button using HTML and CSS?

The neon light button animation effect can be easily created by using HTML and CSS. By using HTML, we will design the basic structure of the button and then by using the CSS, we can create the neon light animation effect. HTML code: In this section, we will design a simple button structure using anc

How To Create an Alert Message Box using CSS?

An alert message box using CSS is a styled container that displays important messages or notifications to users. It is often used for warnings, errors, or success messages, and typically includes styles like background colors, borders, and icons to attract attention.ApproachBasic Structure: Use divs

How To Create A Box in HTML?

In HTML, you can create a "box" using several techniques, such as using <div> elements and styling them with CSS. These boxes can be used for various purposes, such as creating layouts, buttons, or sections within a webpage.Method 1. Div Element with CSSThe <div> element is a block-level

How To Create A Dropup Menu Using CSS?

A Dropup menu is a type of menu in web design that expands upwards from its trigger element instead of the traditional dropdown direction. Dropup menus are often used in contexts such as navigation bars, form selections, and interactive elements.Below are the approaches used for creating the dropup

How to create a dialog box or window in HTML ?

In this article, we will create a dialog box or window using the <dialog> tag in the document. This tag is used to create popup dialog and models on a web page. This tag is new in HTML5. Syntax: <dialog open> Contents... </dialog> Example 1: html <!DOCTYPE html> <html>