Open Bootstrap Modal Popup on Button Click Using jQuery

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.

Test it Live

Output

How to Open Bootstrap Modal Popup on Button Click Using jQuery

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.

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

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’.

Test it Live

Output

Display Modal Popup Window Without Using jQuery

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.