डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

डिप्लोमा इन ऑफिस मैनेजमेंट एण्ड अकाउटिंग

Full Stack Web Development with Laravel

Full Stack Web Development with Laravel

Affiliate Program

Affiliate Program

Create image modal using CSS and JS

<!DOCTYPE html>
<html>
<head>
<title>Image modal</title>
<style>
.image{
cursor: pointer;
transition: 0.3s;
}

.image:hover{
opacity: 0.7;
}

.modal{
display: none;
position: fixed;
z-index: 1;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
left: 0;
top:0;
overflow: auto;
padding-top: 1%;
}

.modal-content{
display: block;
width: 80%;
max-width: 700px;
margin:auto;
}

.close{
position: absolute;
right:1%;
top:1%;
color:white;
cursor: pointer;
font-size: 40px;
}

.modal-content{
animation-name: zoom;
animation-duration: 0.6s;
}

@keyframes zoom{
from {transform: scale(0);}
to{transform: scale(1);}
}

@media only screen and (max-width: 700px){
.modal-content {
  width: 100%;
}
}
</style>
</head>
<body>
<img src="award1.jpg" alt="" width="100" height="100" class="image" onclick="showme(this.src);">
<img src="hos/doctor.jpg" alt="" width="100" height="100" class="image" onclick="showme(this.src);">

<div class="modal" id="modal">
<div class="close" id="close">&times;</div>
<img id="modal-image" class="modal-content">
<div class="caption"></div>
</div>
</body>
</html>

<script type="text/javascript">
var modal=document.getElementById("modal");
var modalImage=document.getElementById("modal-image");
function showme(src){
modal.style.display="block";
modalImage.src=src;
}

document.getElementById("close").onclick=function(){
modal.style.display="none";
}
</script>
© 2016 - 2023, All Rights are Reserved.