To open a popup (modal dialog) when a button is clicked

Abhishek Pratap Singh October 02, 2023

To open a popup (modal dialog) when a button is clicked in jQuery, you can use the jQuery UI library, which provides a convenient dialog() method to create and manage modal dialogs. Here's a step-by-step guide on how to achieve this:


modal dialog)


  1. Include jQuery and jQuery UI in your HTML file. You can download them from the official jQuery and jQuery UI websites or use a Content Delivery Network (CDN).
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Popup Example</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include jQuery UI -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
  1. Create your button and the content for the popup dialog. You can use a <button> element for the button and a hidden <div> for the popup content.
<button id="openDialogButton">Open Popup</button>

<div id="popupDialog" title="Popup Title">
    <p>This is the content of the popup.</p>
</div>
  1. Initialize the popup dialog in your JavaScript code using jQuery. You'll use the dialog() method to make the <div> element behave as a modal dialog. Make sure to set it as hidden initially.
$(document).ready(function () {
    // Initialize the dialog but keep it hidden
    $("#popupDialog").dialog({
        autoOpen: false, // Don't open the dialog on initialization
        modal: true,     // Make it a modal dialog
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

    // Open the dialog when the button is clicked
    $("#openDialogButton").on("click", function () {
        $("#popupDialog").dialog("open");
    });
});

In the code above:

  • autoOpen: false ensures that the dialog is initially hidden.
  • modal: true makes the dialog modal, meaning it will overlay the rest of the page and block interactions with elements behind it.
  • buttons defines the buttons that appear in the dialog. In this case, there's a "Close" button that closes the dialog when clicked.

Now, when you click the "Open Popup" button, the popup dialog will appear. You can customize the content and appearance of the dialog as needed.

Abhishek Pratap Singh

Posted by Abhishek Pratap Singh

Post a Comment

1 Comments