How to Create a Modal with Bootstrap 5 and jQuery?

Estimated read time 3 min read

To create a modal with Bootstrap 5 and jQuery, you can use the Modal component provided by Bootstrap and use jQuery to trigger the modal when a button or link is clicked. Here are the basic steps you can follow:

  1. Include the necessary Bootstrap and jQuery 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-bs-toggle attribute to “modal” and the data-bs-target attribute to the ID of the modal element.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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-bs-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-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
  1. Use jQuery to trigger the modal when the button or link is clicked. You can use the click() method to attach a click event listener to the button or link and the modal() method to show or hide the modal.
<script>
  $(document).ready(function() {
    $('#exampleModal').modal({
      backdrop: 'static',
      keyboard: false,
      show: false
    });

    $('.btn-primary').click(function() {
      $('#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 modal() method to show the modal with the ID exampleModal.

We have also used the modal() method with some options to configure the behavior of the modal. The backdrop option specifies whether to display a backdrop behind the modal when it is shown. The keyboard option specifies whether to close the modal when the escape key is pressed. The show option specifies whether to show the modal immediately when the page is loaded or wait for it to be triggered by JavaScript.

With these steps, you should now have a working modal in your Bootstrap 5 and jQuery application. You can customize the appearance and behavior of your modal by modifying the HTML, CSS, and JavaScript code as needed.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply