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.
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.
Related Topics
- How to get input textbox value using jQuery
- Get Selected Dropdown Value on Change Event | jQuery
- How to submit a form using ajax in jQuery
- How can I get the ID of an element using jQuery
- How to select an element with its name attribute | jQuery
- How to get the data-id attribute using jQuery
- How to disable/enable submit button after clicked | jQuery
- How to replace innerHTML of a div using jQuery
- Change the selected value of a drop-down list using jQuery
- How to get the value of a CheckBox with jQuery
- How to wait 'X' seconds with jQuery?
- How to detect enter key press on keyboard | jQuery
- How to allow numbers only in a Text Box using jQuery.
- How to dynamically create a div in jQuery?