How to open a Bootstrap modal window using jQuery

Opening a Bootstrap modal window using jQuery involves triggering the modal's display through a combination of HTML, Bootstrap classes, and jQuery event handling. Here's a comprehensive guide with examples:

run this source code Browser View

HTML Structure

Set up the HTML structure for the modal and the trigger element that will initiate its opening. This can be a button, link, or any element you want to use as a trigger.

<!-- Trigger button --> <button id="openModalBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open Modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </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>

jQuery Event Handling

Use jQuery to handle the click event on the trigger element and programmatically open the modal.

$(document).ready(function() { $("#openModalBtn").click(function() { $("#myModal").modal("show"); // Show the modal }); });

In this example, clicking the "Open Modal" button triggers the click event handler associated with #openModalBtn. Within this handler, the $("#myModal").modal("show") command uses the Bootstrap modal method to display the modal window.

Full Source | jQuery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap Modal Example</title> <!-- Add Bootstrap CSS link --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container mt-5"> <!-- Trigger button --> <button id="openModalBtn" type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open Modal </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal Header</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> Modal text here... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <!-- Add jQuery and Bootstrap JS scripts --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script> $(document).ready(function() { $("#openModalBtn").click(function() { $("#myModal").modal("show"); // Show the modal }); }); </script> </body> </html>

When you click the "Open Modal" button, the modal will appear with its designated content.


Open (Show) Bootstrap Modal Popup Window using jQuery

Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:

$('#myModal').on('shown.bs.modal', function () { $('#myInput').focus() })

This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

Bootstrap $('#myModal').modal('show') is not working: why?

Most common reason for such problems are:

  1. Forgot to include jQuery library in the document.
  2. Included the Jquery library more than once in the document.
  3. The versions of your Javascript and Bootstrap does not match.
  4. Forgot to include bootstrap.js library in the document.
  5. The modal ‹div› is missing the modal class.
  6. # sign is missing in the Jquery selector.
  7. The id of the modal ‹div› is incorrect.

Conclusion

To open a Bootstrap modal window using jQuery, you first set up the HTML structure with a trigger element and the modal content. Utilizing jQuery, you attach a click event handler to the trigger element that invokes the .modal("show") method on the modal element, enabling the modal window to display interactively. This approach provides an elegant way to present additional content or interactions to users.






Related Topics
  1. How to get input textbox value using jQuery
  2. JQuery Get Selected Dropdown Value on Change Event
  3. How to submit a form using ajax in jQuery
  4. How can I get the ID of an element using jQuery
  1. How to select an element with its name attribute | jQuery
  2. How to get the data-id attribute using jQuery
  3. How to disable/enable submit button after clicked | jQuery
  4. How to replace innerHTML of a div using jQuery
  5. How to get the value of a CheckBox with jQuery
  6. How to wait 'X' seconds with jQuery?
  7. How to check if an enter key is pressed with jQuery
  8. How to allow numbers only in a Text Box using jQuery
  9. How to dynamically create a div in jQuery?