How to generate a simple popup using jQuery ?

Last Updated : 24 Sep, 2024

Generating a simple popup using jQuery involves creating a small window or dialog that appears in front of the webpage content. This can be triggered by user actions, like clicking a button, and can display messages, forms, or other content dynamically.

Here we have some common approaches to generate a simple popup using jQuery:

Table of Content

Using .toggle() Method
Using jQuery UI dialog() Method

Approach 1: Using .toggle() Method

The .toggle() method in jQuery allows you to switch between showing and hiding an element, such as a popup, with a single function. By initially setting the element to be hidden, .toggle() dynamically shows the element when triggered and hides it when clicked again.

Syntax:

$(selector).toggle();

Example: In this example we creates a popup using jQuery’s .toggle() method, which shows and hides the content when the “show popup” button or close button is clicked, providing dynamic visibility control.

HTML

<!DOCTYPE html>
<html>

<head>
    <!-- jQuery cdn link -->
    <script src=
        "https://code.jquery.com/jquery-3.5.1.min.js">
    </script>
    
    <style type="text/css">
        .content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 200px;
            text-align: center;
            background-color: #e8eae6;
            box-sizing: border-box;
            padding: 10px;
            z-index: 100;
            display: none;
            /*to hide popup initially*/
        }
        
        .close-btn {
            position: absolute;
            right: 20px;
            top: 15px;
            background-color: black;
            color: white;
            border-radius: 50%;
            padding: 4px;
        }
    </style>
</head>

<body>
    <button onclick="togglePopup()">show popup</button>

    <!-- div containing the popup -->
    <div class="content">
        <div onclick="togglePopup()" class="close-btn">
            &times
        </div>
        <h3>Popup</h3>

        <p>
            jQuery is an open source JavaScript library 
            that simplifies the interactions between an
            HTML/CSS document, or more precisely the 
            Document Object Model (DOM), and JavaScript.
            Elaborating the terms, jQuery simplifies 
            HTML document traversing and manipulation, 
            browser event handling, DOM animations, 
            Ajax interactions, and cross-browser 
            JavaScript development.
        </p>
    </div>

    <script type="text/javascript">
    
        // Function to show and hide the popup
        function togglePopup() {
            $(".content").toggle();
        }
    </script>
</body>

</html>

Output:

Approach 2: Using jQuery UI dialog() Method

The jQuery UI dialog() method creates a customizable, modal popup dialog. It allows adding dynamic content with built-in features like close buttons, drag functionality, and auto-focus. The dialog can be triggered by user actions, such as button clicks.

Example: In this example we creates a jQuery UI dialog popup that remains hidden by default. It opens when the “Show Popup” button is clicked, using the dialog() method to display the popup content.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>jQuery UI Dialog Example</title>
    <!-- jQuery and jQuery UI CDN links -->
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" 
          href=
"https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style>
        /* Custom dialog style */
        #dialog {
            display: none;
            /* Hide the dialog by default */
        }
    </style>
</head>

<body>

    <button id="openDialog">Show Popup</button>

    <!-- The dialog content -->
    <div id="dialog" title="Simple Popup Dialog">
        <p>This is a jQuery UI Dialog popup.</p>
    </div>

    <script>
        $(document).ready(function () {
            // Initialize the dialog but keep it closed
            $("#dialog").dialog({
                autoOpen: false
            });

            // Open the dialog on button click
            $("#openDialog").click(function () {
                $("#dialog").dialog("open");
            });
        });
    </script>
</body>

</html>

Output:

How to Create an Animated Search Box using HTML and CSS ?

darksiderrohan

Improve

Article Tags :

How to generate a simple popup using jQuery ?

Approach 1: Using .toggle() Method

Output:

Approach 2: Using jQuery UI dialog() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?