Welcome To ITSolutionsGuides,
Lets see how to create OnClick View Image In Modal Using JQuery with it solutions guides tutorial. Today we will create a bootstrap model to view the clicked image in the modal with the help of the Jquery and the bootstrap framework. This view of image in modal while clicking will highly increase the user experience.
Explore the seamless integration of jQuery to implement a captivating "OnClick View Image in Modal" feature, enhancing user experience with dynamic image display.
In this example we will use the bootstrap modal to view the clicked image. While clicking the image the JQuery function gets triggerd and gets the clicked image src and add attribute to the image tag with the src information in the modal.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ITSolutionsGuides</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="col-md-3 my-1 image">
<div class="card p-1">
<img src="https://itsolutionsguides.com/website/images/banner/banner.jpg" class="rounded imageTag" alt="" />
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<img id="modalbody" alt="" class="img-fluid" />
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(".imageTag").click(function () {
var Src = $(this).attr("src");
console.log(Src);
$("#modalbody").attr("src", Src);
$("#exampleModal").modal("show");
});
</script>
</body>
</html>We hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides