Open Bootstrap Modal Popup on Image Click Using 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

<style>
#MyForm{
width: 100%;
border: 1px solid #ccc;
padding: 14px;
background: #ececec;
}	
#Myimg{
margin:0 auto;
background: #ccc;
border: 1px solid #000;
padding: 9px;
}
</style>
<script>
$(document).ready(function(){
$('#Myimg').click(function(){
$('#Mymodal').modal('show')
});
});
</script>
<img src="/images/user1.jpg" alt="Open Bootstrap Modal on Image Click Using jQuery" width="200px" id="Myimg">
<!-- .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">&times;</button> 
<h4 class="modal-title">
Notification
</h4>                                                             
</div> 
<div class="modal-body">
<form id="MyForm" action="" method="post">
<label>Enter Name</label>
<input type="text" name="name" placeholder="Enter your name" class="form-control"/><br>
<label>Enter Email</label>
<input type="email" name="email" placeholder="Enter your email" class="form-control"/><br>
<button type="button" class="btn btn-default" name="submit">Submit</button>
</form>
</div>   
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>                        
</div>
</div>                                                                       
</div>                                      
</div>

<style>

#MyForm{

width: 100%;

border: 1px solid #ccc;

padding: 14px;

background: #ececec;

}

#Myimg{

margin:0 auto;

background: #ccc;

border: 1px solid #000;

padding: 9px;

}

</style>

$(document).ready(function(){

$('#Myimg').click(function(){

$('#Mymodal').modal('show')

});

</script>

Notification

</h4>

</div>

<label>Enter Name</label>

<label>Enter Email</label>

<button type="button" class="btn btn-default" name="submit">Submit</button>

</form>

</div>

<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

</div>

Output

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

Bootstrap Tutorial

Open Bootstrap Modal Popup on Image Click in jQuery

How to Open Bootstrap Modal Popup on Image Click in jQuery

Related Posts: