How to open a Bootstrap modal window using jQuery

Modals are built with HTML, CSS, and JavaScript. The Modal plugin is a dialog prompts that is displayed on top of the current page with the minimum required functionality and smart defaults. You can use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Open (Show) Bootstrap Modal Popup Window using jQuery

Bootstrap modal functions

Bootstrap has a few functions that can be called manually on modals:

$('#myModal').modal('show'); //Opens the modal $('#myModal').modal('hide'); //Hides the modal $('#myModal').modal('toggle'); //Toggles the modal

Trigger via JavaScript

You can trigger bootstrap modal via jQuery/JavaScript.

$("#myModal").modal()

The following bootstrap modal example included are the modal header, modal body, and modal footer.

Full Source | JavaScript/jQuery

<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap model trigger via JavaScript</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <h2>Bootstrap model trigger via JavaScript</h2> <button type="button" class="btn btn-info btn-lg" id="myBtn">Launch demo modal</button> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> Model text here... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <script> $(document).ready(function(){ $("#myBtn").click(function(){ $('#myModal').modal({show:true}); }); }); </script> </body> </html>

Trigger bootstrap modal via JavaScript

$("#myModal").modal() //initializing the modal with the default options.

Since the default value of the show option is true, it's effectively the same as calling...

$('#myModal').modal({show:true});

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:

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

Next : How to select an element with its name attribute | jQuery

Related Topics