In this tutorial, learn how to open Bootstrap modal on button click using jQuery. You can display Bootstrap modal when someone clicks on button using jQuery. You have to use the jQuery click event to find the clicks and open the bootstrap modal.

A Bootstrap modal is the quickest way of showing popup easily using Bootstrap. You just need to include the Bootstrap library and add some HTML code. your popup is ready to open on button click. You can also use some jQuery events to open the Bootstrap modal or you can add some attributes with its values to open Bootstrap modal on button click without jQuery.

Open Bootstrap Modal on Button Click Using jQuery

If you want to open Bootstrap modal on button click using jQuery. You have to use the modal() with the value 'show' to display the modal on click event. The below example contains the button and the Bootstrap modal HTML code.

Assign a unique id's to button and modal. Use these id's to find the click event on button and open the modal using the modal().

Output

Click the button given above to open the Boostrap modal. The popup starts appearing when someone click the button.

However, if you don't want to use the jQuery code to open the Bootstrap modal. You can add certain attributes to open Bootstrap modal on button click. See the below section to create modal and open it without using any jQuery.

Open Bootstrap Modal Window Without Using jQuery on Button Click

To open a Bootstrap modal on button click without using the jQuery. You have to add the two attributes to the HTML button tag with some values.

Add first attribute data-target with the value #idofmodal and change the id with the id of the modal. Now, add the second attribute with the value data-toggle="modal" and no need to change value for this second attribute, it should remain as 'modal'.

Your modal is now ready to open on button click event and you don't need to add extra jQuery codes here.

Output

Click the above example to open Bootstrap modal on button click. jQuery is not required here to add and open the modal. Just use the attributes in the button tag with explained values as above.

Hope, you like this tutorial and if you have any query regarding the Bootstrap modal then please comment below. Also tell me, which method are you using the open the Bootstrap modal on click of button.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.