How to Open a Popup on Click using JavaScript ?

Last Updated : 20 Aug, 2024

Opening a Pop-up when the click action is performed is the user-interactive technique. We can use this functionality in messages, or forms to show some error or alert messages before the user moves to the next action.

Table of Content

Using display property
Using classList Property
Using visibility property

In this approach, we are using the display property in JavaScript to toggle the visibility of the overlay and popup dialog elements. The popupFn() and closeFn() functions dynamically set the display property to 'block' for opening and 'none' for closing, performing a popup effect on button click.

Syntax:

document.getElementById("element").
    style.display = "none";

Example: In this example we displays a popup dialog and overlay using the display property. Clicking "Open Popup" shows the dialog and overlay, while "Close" hides them. The overlay dims the background for better focus.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using display property</title>
    <style>
        #popupDialog {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }

        #overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
        }

        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h3>Using display property</h3>
    <button onclick="popupFn()">
        Open Popup
    </button>
    <div id="overlay"></div>
    <div id="popupDialog">
        <p>Welcome to GeeksforGeeks</p>
        <button onclick="closeFn()">
            Close
        </button>
    </div>
    <script>
        function popupFn() {
            document.getElementById(
                "overlay"
            ).style.display = "block";
            document.getElementById(
                "popupDialog"
            ).style.display = "block";
        }
        function closeFn() {
            document.getElementById(
                "overlay"
            ).style.display = "none";
            document.getElementById(
                "popupDialog"
            ).style.display = "none";
        }
    </script>
</body>

</html>

Output:

Output1

In this approach, we will use the classList property with toggle() method in JavaScript to toggle the visibility of the overlay and popup dialog elements. The openFn() function dynamically adds or removes the 'hidden' class, while adjusting the opacity for a smooth transition, which results in a popup on button click.

Syntax:

const elementClasses = 
    elementNodeReference.classList;

Example: In this example we uses classList to toggle the visibility of a popup and overlay. Clicking "Open Popup" fades in the dialog, and "Close" fades it out, using opacity and hidden class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using classList Property</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        #popupContainer {
            position: relative;
        }

        #overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999;
            display: none;
        }

        #popupDialog {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }

        h1 {
            color: #4caf50;
            margin-bottom: 20px;
        }

        p {
            color: #333;
            margin-bottom: 15px;
        }

        button {
            padding: 10px 20px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease-in-out;
        }

        button:hover {
            background-color: #45a049;
        }
    </style>
</head>

<body>
    <div id="popupContainer">
        <h1>GeeksforGeeks</h1>
        <h3>Using classList Property</h3>
        <button onclick="openFn()">
            Open Popup
        </button>
        <div id="overlay" class="hidden"></div>
        <div id="popupDialog" class="hidden">
            <p>
                Welcome to a more stylish
                GeeksforGeeks experience!
            </p>
            <button onclick="openFn()">
                Close
            </button>
        </div>
    </div>
    <script>
        function openFn() {
            const over =
                document.getElementById(
                    "overlay"
                );
            const popDialog =
                document.getElementById(
                    "popupDialog"
                );
            over.classList.toggle("hidden");
            popDialog.classList.toggle(
                "hidden"
            );
            popDialog.style.opacity =
                popDialog.style.opacity ===
                    "1"
                    ? "0"
                    : "1";
        }
    </script>
</body>

</html>

Output:

Output1

In this approach we are using the visibility property in CSS to toggle the visibility of a popup dialog. When the "Open Popup" button is clicked, the openPop() function is called. This function checks the current visibility state of the popup and toggles it between visible and hidden.

Syntax:

const elementClasses =
                document.getElementById('elementClasses');
            elementClasses.style.visibility =
                (elementClasses.style.visibility === 'visible') ? 'hidden' : 'visible';

Example: In this example we uses the visibility property to toggle a popup dialog's visibility. The Open Popup button shows the dialog, while the "Close" button hides it by toggling visibility between visible and hidden.

HTML