onclick open modal jquery
To open a Bootstrap modal on click using jQuery, you can use the following code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Modal Example</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<button id="openModalBtn" class="btn btn-primary">Open Modal</button>
<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">
<p>Modal body content goes here.</p>
</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>
<script>
$(document).ready(function(){
$("#openModalBtn").click(function(){
$("#myModal").modal('show');
});
});
</script>
</body>
</html>
In this code, we have a button with the id "openModalBtn" which triggers the modal to open when clicked. The modal itself is defined using the Bootstrap modal markup, with the id "myModal".
The JavaScript code using jQuery listens for the click event on the button with the id "openModalBtn". When the button is clicked, it calls the modal('show') method on the modal element with the id "myModal", which opens the modal.
Make sure to include the necessary CSS and JavaScript files for Bootstrap and jQuery in the <head> section of your HTML file.
This code will allow you to open a Bootstrap modal when the button is clicked using jQuery.