In this post, we will learn how to create modal image with CSS and JavaScript. When we click on an image, a popup window opens and we see the image on full screen with close button and caption. 


How To Create Modal Image with CSS and JavaScript ?

Create Modal Image

Example of Modal Image:

CodexRadar Logo

To create a modal image, we follow the following steps:

Step (1) : In this step we write HTML code as follows:

<img id="img" src="your-image.jpg" alt="CodexRadar Logo" style="width:100%;max-width:300px">

<div id="modal" class="modal">
<span class="closeBtn">&times;</span>
<img class="modalImg" id="imgshow">
<div id="imgcaption"></div>
</div> code-box

Step (2) : Now write CSS code as follows:

#img {
border-radius: 5px;
cursor: pointer;
background-color: #000;
transition: 0.5s;
}
#img:hover {
opacity: 0.7;
}

.modal {
display:none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
.modalImg {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}

#imgcaption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}

.modalImg,
#imgcaption {
animation-name: zoom;
animation-duration: 0.6s;
}

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

.closeBtn {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.closeBtn:hover,
.closeBtn:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

@media only screen and (max-width: 700px) {
.modalImg {
width: 100%;
}
} code-box

Step (3) : In this step we write JavaScript as following step:
  • First with the help of document.getElementById() method get the value of modal id and store it in modal variable.
  • Similarly, we will store the value of img id in img variable, the value of imgshow id in modalImg and the value of imgcaption id in caption variable.
  • Then use the onclick function on the img variable and display:block the modal and put the source of the image in the source of modalImg and put the value of the alt attribute of this image in the innerHTML of the caption varibale.
  • Then get the value of closeBtn class from document.getElementsByClassName() method and then change the style of modal to display:none using the onclick function on it. Now whenever modal is open and we click on this button the modal will be hidden.
var modal = document.getElementById("modal");

var img = document.getElementById("img");

var modalImg = document.getElementById("imgshow");

var caption = document.getElementById("imgcaption");

img.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
caption.innerHTML = this.alt;
}

var  closemodal = document.getElementsByClassName("closeBtn")[0];

closemodal.onclick = function() {
modal.style.display = "none";
} code-box

Summary

In this post we learn how to make a modal image with CSS and JavaScript. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post