Logo Image popup tutorial

This tutorial is about creating a simple image popup window or modal image if you prefer. You can see a working example here.

First we'll create the HTML for the actual popup.
The outer DIV is the background, which will cover the entire viewport (we set the style "display: none;" as inline CSS because the JavaScript, we'll be making later, will use this to show and hide the popup).
The next DIV is a wrapper for the content and will serve as the visible "frame" for the content.
The next two are the title and the image. Simple.

At this point you could style the popup to your hearts content by setting the style "display: none;" to "display: block;" temporarily. When done styling, set it back to "display: none;". 

HTML


<div id="popup-background" class="popup-background" style="display: none;">
    <div class="popup-content">
        <div id="popup-title"></div>
        <img id="popup-image" class="popup-image">
    </div>
</div>

We will also need some actual pictures to display in our popup. 

HTML


<img class="image-popup" src="images/image1.jpg" alt="Image example 1.">
<img class="image-popup" src="images/image2.jpg" alt="Image example 2.">
<img class="image-popup" src="images/image3.jpg" alt="Image example 3.">

Time for the fun part. JavaScript. Yeah!

Let's make the references first.
We need to get all the images with class="image-popup" and put them in an array. This is very simple: 

JavaScript


let thumbnails = document.querySelectorAll(".image-popup");

Next we need to reference the background, the title and the image markup.

This is also simple: 

JavaScript


let popupBackground = document.querySelector("#popup-background");
let popupTitle = document.querySelector("#popup-title");
let popupImage = document.querySelector("#popup-image");

Now we need to add event listeners to all the thumbnails, so we can show our popup with the correct content when we press the thumbnail.

For this, we loop through the thumbnails and add it one at a time, like this: 

JavaScript


for (let i = 0; i < thumbnails.length; i++) {
    thumbnails[i].addEventListener("click", function(){
        popupBackground.style.display = "block" //Display the popup;
        popupTitle.innerHTML = this.alt //Set the popup title text to the same as the thumbnails alt text;
        popupImage.src = this.src //Set the popup image src to the same as the thumbnail src;
    })
}

There is an alternative to the for loop that, in my oppinion, makes the code easier to read:

There are also some minor pitfalls.

If you need the code to work in IE8 or older, you should use the above for loop.
There is also a small matter of performance, which you should only worry about if your application is very large or you make CPU intensive tight loops and you really need to micro manage the code. In such cases, go for the for loop since it is slightly faster. But again, don't worry about it for something as simple as this image popup. 

JavaScript


thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener("click", function(){
        popupBackground.style.display = "block" //Display the popup;
        popupTitle.innerHTML = this.alt //Set the popup title text to the same as the thumbnails alt text;
        popupImage.src = this.src //Set the popup image src to the same as the thumbnail src;
    })
});

Now all there is left is to make sure we can close our popup again
We do this with an event listener on the background, so a click anywhere in the viewport makes the popup hide again: 

JavaScript


popupBackground.addEventListener("click", function(){
    popupBackground.style.display = "none";
})

Your code should end up looking something like this: 

JavaScript


let thumbnails = document.querySelectorAll(".image-popup");

let popupBackground = document.querySelector("#popup-background");
let popupTitle = document.querySelector("#popup-title");
let popupImage = document.querySelector("#popup-image");

thumbnails.forEach(thumbnail => {
    thumbnail.addEventListener("click", function(){
        popupBackground.style.display = "block";
        popupTitle.innerHTML = this.alt;
        popupImage.src = this.src;
    })
});

popupBackground.addEventListener("click", function(){
    popupBackground.style.display = "none";
})

As an alternative to the close feature, you could use your own close button and add the event listener to that instead. Choice is yours. Hope you enjoyed.