Create an Image modal with JavaScript!
Hi guys! In this tutorial, we will be creating a popup image modal using javascript. The basic idea is that when a user clicks an image, a larger version should be opened in a modal. This is commonly seen in lightbox galleries and every other image gallery out there. Check out the detailed javascript gallery tutorials which also includes image navigation.
Create a Grid of Images
Firstly, we are going to create a grid of images using CSS grid. You can create a modal using one image too, but many images is more realistic and can be used for the lightbox part too.
HTML markup
lang="en"> name="viewport" content="width=device-width, initial-scale=1.0" /> async src="https://kit.fontawesome.com/6cc05e1e8e.js" crossorigin="anonymous"> rel="stylesheet" href="./style.css"> charset="UTF-8" /> class="main"> Gallery class="gallery"> class="gallery__item"> src="./img/1.jpg" /> class="gallery__item"> src="./img/2.jpg" /> class="gallery__item"> src="./img/3.jpg" /> class="gallery__item"> src="./img/4.jpg" /> class="gallery__item"> src="./img/5.jpg" /> class="gallery__item"> src="./img/6.jpg" /> class="gallery__item"> src="./img/7.jpg" /> class="gallery__item"> src="./img/8.jpg" /> You may notice a few things here. Firstly, I have imported font awesome for the icon of the close button. I have also linked the style.css, which will contain our CSS. We have 8 images, each of which are in a div called gallery__item .
Styling the gallery
The CSS is quite straight forward. We are using flex box on our main container to centre everything both vertically and horizontally. Next, we are using CSS grid to created a grid of images which has 4 columns and 2 rows.
* padding: 0; margin: 0; box-sizing: border-box; > .main width: 100%; flex-direction: column; display: flex; align-items: center; justify-content: center; padding: 20px 0px 60px 0px; > h1 margin: 10px 0px 30px 0px; font-family: cursive; color: rgb(0, 6, 90); font-size: 50px; > .gallery display: grid; width: 90%; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; > .gallery__item cursor: pointer; overflow: hidden; border-radius: 4px; > .gallery__item img width: 100%; height: 100%; object-fit: cover; transition: 0.3s ease-in-out; > .gallery__item img:hover transform: scale(1.1); > @media (max-width: 950px) .gallery grid-template-columns: repeat(2, 1fr); > > @media (max-width: 550px) .gallery grid-template-columns: repeat(1, 1fr); > > 
Your gallery should be looking like this now:
Javascript
How TO — Modal Images
Learn how to create responsive Modal Images with CSS and JavaScript.
Modal Image
A modal is a dialog box/popup window that is displayed on top of the current page.
This example use most of the code from the previous example, Modal Boxes, only in this example, we use images.
Step 1) Add HTML:
Example
class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).
The element with class=»close» should be used to close the modal.
Step 2) Add CSS:
Example
/* Style the Image Used to Trigger the Modal */
#myImg border-radius: 5px;
cursor: pointer;
transition: 0.3s;
>
/* The Modal (background) */
.modal display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
>
/* Modal Content (Image) */
.modal-content margin: auto;
display: block;
width: 80%;
max-width: 700px;
>
/* Caption of Modal Image (Image Text) — Same Width as the Image */
#caption margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
>
/* Add Animation — Zoom in the Modal */
.modal-content, #caption <
animation-name: zoom;
animation-duration: 0.6s;
>
/* The Close Button */
.close position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
>
.close:hover,
.close:focus color: #bbb;
text-decoration: none;
cursor: pointer;
>
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) .modal-content width: 100%;
>
>
The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.
Add a black background color with opacity.
Set position to fixed; meaning it will move up and down the page when the user scrolls.
It is hidden by default, and should be shown with a click of a button (we’ll cover this later).
The .modal-content class
This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).
We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.
The .close class
The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.
Step 3) Add JavaScript:
Example
// Get the modal
var modal = document.getElementById(«myModal»);
// Get the image and insert it inside the modal — use its «alt» text as a caption
var img = document.getElementById(«myImg»);
var modalImg = document.getElementById(«img01»);
var captionText = document.getElementById(«caption»);
img.onclick = function() modal.style.display = «block»;
modalImg.src = this.src;
captionText.innerHTML = this.alt;
>
// Get the element that closes the modal
var span = document.getElementsByClassName(«close»)[0];
// When the user clicks on (x), close the modal
span.onclick = function() <
modal.style.display = «none»;
>
Tip: Also check out Modals and Lightbox.