<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>pop up</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.row
{
margin-bottom: 15px;
padding:15px;
}
h2{
text-transform: uppercase;
margin-top: 40px;
}
img{
border-radius: 5px;
box-shadow: 0 10px 20px pink;
cursor:pointer;
}
#popup
{
border: 5px solid #ffff;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<div class="form-group">
<h2>pop up image gallery</h2>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature1.jpg" class="popup" alt="nature1" width="250" height="200">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature2.jpg" class="popup" alt="nature2" width="250" height="200">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature3.jpg" class="popup" alt="nature3" width="250" height="200">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature4.jpg" class="popup" alt="nature4" width="250" height="200">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature5.jpg" class="popup" alt="nature5" width="250" height="200">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<img src="images/nature6.jpg" class="popup" alt="nature6" width="250" height="200">
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<img id="popup" src="" ></img>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
<script>
$(".popup").click(function(){
var src=$(this).attr("src");
alert(src)
$(".modal").modal("show");
$("#popup").attr("src",src);
});
</script>
</body>
</html>
No comments:
Post a Comment
Practice and let me know for nw code snippets