Open Bootstrap Modal Popup on Image Click in jQuery

Last Updated on April 13, 2021 by Roshan Parihar

In this tutorial, learn how to open the Bootstrap modal popup on image click. The short answer is: use jQuery modal('show') to display a modal popup when someone clicks on the image. You can display different modals for different images or you can display the same modal for all the images with this method.

If you want to display the profile of your team members in the popup on the image click, you can also use this to open Bootstrap modal popup on image click.

How to Open Bootstrap Modal Popup on Image Click in jQuery

Bootstrap modal is the fastest way of creating modal on button click. However, it becomes more useful if you start opening modals on image click. The user can click on its image and add or modify their profile details easily on the Bootstrap modal popup.

Below is a simple example that contains CSS, jQuery, and Bootstrap modal. To trigger the modal with the click of the image, you can use the jQuery click event. After that, Use the modal('show') with click event of the image element that opens a Bootstrap modal.

Test it Live

Output

Open Bootstrap Modal Popup on Image Click in jQuery

The above example contains the form inside the modal to get the user profile. To trigger the modal, you can use the above-given jQuery script to display bootstrap modal on image click. You can also show the profile details and ask the users to click their image to open the modal and update their profile details.

I hope you like this post on how to display Bootstrap modal on image click. The above example contains the image and on click image open modal to display content on popup. You can use the above example to open modal on image click.

You may also like to read