How to Create a Modal Window with jQuery and AJAX?

Estimated read time 3 min read

To create a modal window with jQuery and AJAX, you can use the $.ajax() function provided by jQuery to load content from an external HTML file or web service and insert it into a modal window. Here are the basic steps you can follow:

  1. Include the necessary jQuery and Bootstrap files in your HTML document. You can use the following CDN links:
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js"></script>
  1. Create a button or link that will trigger the modal when clicked. Set the data-toggle attribute to “modal” and the data-target attribute to the ID of the modal element.
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch Modal
</button>
  1. Create a div element that will serve as the modal. Set the id attribute to a unique value and add the necessary HTML elements for the modal header, body, and footer.
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal content goes here
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  1. Use jQuery and AJAX to load content from an external HTML file or web service and insert it into the modal window. You can use the $.ajax() function to make an AJAX request to the external source and the html() method to insert the response into the modal body.
<script>
  $(document).ready(function() {
    $('.btn-primary').click(function() {
      $.ajax({
        url: 'path/to/external/file.html',
        type: 'GET',
        success: function(response) {
          $('#exampleModal .modal-body').html(response);
          $('#exampleModal').modal('show');
        }
      });
    });
  });
</script>

In this example, we have used jQuery to attach a click event listener to the button with class btn-primary. In the event listener function, we have used the $.ajax() function to make an AJAX request to the external HTML file.

We have set the url option to the path of the external HTML file, the type option to “GET” to retrieve the content, and the success option to a callback function that will be executed when the AJAX request is successful.

In the callback function, we have used the html() method to insert the response from the AJAX request into the modal body. We have used the modal() method to show the modal with the ID exampleModal.

With these steps, you should now have a working modal window with jQuery and AJAX in your application. You can customize the appearance and behavior of your modal by modifying the

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply