Last Updated on June 5, 2021 by Roshan Parihar
In this tutorial, learn how to open Bootstrap modal popup on button click using jQuery and Bootstrap. The short answer is to use the jQuery modal('show') to apply to the modal on button click event.
You can also display the Bootstrap modal by only using the Bootstrap attributes data-target and data-toggle. These two attributes should be added to the <button> element that displays modal on button click. Let’s find out with the examples given below:
How to Open Bootstrap Modal Popup on Button Click Using jQuery
You have to use the id of the <button> element in jQuery to find the click event of the button. After that, apply the jQuery modal('show') to the modal by using the modal id. So, assign a unique id to both the button and modal.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> $(document).ready(function(){ $('#MybtnModal').click(function(){ $('#Mymodal').modal('show') }); }); </script> <p>Click the below button to open the modal popup.</p> <button type="button" id="MybtnModal" class="btn btn-primary">Open Modal Using jQuery</button> <!-- .modal --> <div class="modal fade" id="Mymodal"> <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">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
The above example contains the button element that you have to click to open the Bootstrap modal. The popup starts appearing when someone clicks the button.
If you don’t want to use the jQuery code to open the Bootstrap modal. You can also use Bootstrap to add fewer attributes to the button element that opens the Bootstrap modal on click event as given in the below example.
Display Modal Popup Window Without Using jQuery
To open a Bootstrap modal on button click without using jQuery, you need to add two attributes to the <button> element with some values.
The first attribute is data-target with the id of the modal popup that is ‘#idofmodal’ in the below example. You have to change the id with the id of your modal popup. After that, add the second attribute with the value as data-toggle="modal" and no need to change the value for this second attribute, it should remain as ‘modal’.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<p>Click the below button to open the modal popup.</p> <button type="button" class="btn btn-primary" data-target="#MySecondmodal" data-toggle="modal">Open Modal Without jQuery</button> <!-- .modal --> <div class="modal fade" id="MySecondmodal"> <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">Notification</h4> </div> <div class="modal-body"> Are you sure you want to continue? </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
Output
You can click the button given above to display the Bootstrap modal. Here, jQuery is not required to get the popup modal. Just use the attributes in the <button> tag with explained values as above.
DOWNLOAD Free jQuery CHEAT SHEET
You May Also Like to Read
3 replies on “Open Bootstrap Modal Popup on Button Click Using jQuery”
Comments are closed.
Advertisements
Advertisements
very easy example. I am so happy to see this type of example. Keep it.
Thanks for your kind words.
Thank you, it’s useful for me.