How to create a modal dialog or pop-up window with jQuery?

To create a modal dialog or pop-up window with jQuery, you can use the jQuery UI library. Follow these steps:

Include the necessary jQuery and jQuery UI files in your HTML:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<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>

Create the HTML structure for the modal dialog:

<div id="dialog" title="Modal Dialog">
  <p>This is a modal dialog.</p>
</div>

Initialize the dialog using jQuery UI:

<script>
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false, // dialog will not be opened on page load
      modal: true, // dialog will be modal
      buttons: {
        "Close": function() { // Close button action
          $(this).dialog("close");
        }
      }
    });

    $("#open-dialog").click(function() { // click event to open the dialog
      $("#dialog").dialog("open");
    });
  });
</script>

Trigger the dialog on a button click:

<button id="open-dialog">Open Dialog</button>

When the button with the ID "open-dialog" is clicked, the dialog will be opened. The dialog will have a "Close" button that will close the dialog when clicked.

You can customize the appearance and behavior of the dialog by modifying the options passed to the dialog() function.