PUBLISHED ON: JUNE 10, 2021
How to open a Bootstrap Modal window using jQuery?
Bootstrap Modal Plugin is used to display some confirmation messages, some warnings, or cookies. The Bootstrap Modal can be opened using jQuery only if you are using Bootstrap 4 or its previous versions. jQuery has been removed from Bootstrap 5 and it has been replaced with vanilla javascript. So if you want to open the Modal window in Bootstrap 5 then use either javascript instead of jQuery.
Don't worry about it because we are going to show you how to open Modal using both jQuery and javascript so that the Bootstrap version will not stop your work.
Bootstrap 4 Modal using jQuery
To open Modal using jQuery use the following code in your program.
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
Let's add the above code to our main program where we have created a modal using Bootstrap 4. The modal can be toggled using the above jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<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">Header</h4>
</div>
<div class="modal-body">
<p>Bootstrap 4.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-info">Save changes</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
</body>
</html>
Output:
Here is the output of the above code.
Bootstrap 5 Modal via javascript
The code used to show and hide Modal via javaScript is Bootstrap 5.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Let's see an example to toggle Modal using Bootstrap 5.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script></head>
<body>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
...
</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>
<script>
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})
myModal.show()
</script>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So we can use jQuery to open Bootstrap 4 Modal. For Bootstrap 5 we need to use javaScript instead of jQuery to open the modal window. We can also use data attributes for the same purpose.
