How to Create Responsive Modal Images using CSS & JavaScript?

How to Create Responsive Modal Images using CSS & JavaScript?

Last Updated : 13 May, 2024

Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time.

compressed_model-img — Preview

Approach

First, create a basic HTML layout for your image gallery and modal pop-ups. Each image in the gallery should have a corresponding modal with a unique ID.
Then use CSS to style your webpage, including elements like image containers, galleries, modals, and layout components
And for making the model images responsive use the media queries in CSS. This ensures that your images adapt well to different screen sizes and devices.
Implement JavaScript functions to handle the opening and closing of modal windows when images are clicked. When a user clicks on an image, fetch the respective modal ID and set its display property to "block". Similarly, clicking the close button should set the display property of the modal to "none".

Example: The example shows how to create responsive modal images using CSS and Javascript.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>Responsive Modal Images</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1 class="main-heading">
      Responsive Modal Images
      </h1>
    <div class="gallery">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg" 
             alt="HTML" class="gallery-image" 
             onclick="openModal('modal1', 1)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg" 
             alt="JavaScript" class="gallery-image" 
             onclick="openModal('modal2', 2)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg" 
             alt="Web" class="gallery-image" 
             onclick="openModal('modal3', 3)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg" 
             alt="Web 2" class="gallery-image" 
             onclick="openModal('modal4', 4)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
             alt="Cyber security" class="gallery-image" 
             onclick="openModal('modal5', 5)">
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp" 
             alt="Devops" class="gallery-image" 
             onclick="openModal('modal6', 6)">
    </div>

    <div id="modal1" class="modal">
        <span class="close" 
              onclick="closeModal('modal1')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154939/html-(1).jpg" 
             alt="HTML"
             class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal2" class="modal">
        <span class="close" 
              onclick="closeModal('modal2')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154940/js-(1).jpg" 
             alt="JavaScript" class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal3" class="modal">
        <span class="close" 
              onclick="closeModal('modal3')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154942/web-(1).jpg" 
             alt="Web"
             class="modal-content">
        <div class="message"></div>
    </div>

    <div id="modal4" class="modal">
        <span class="close" 
              onclick="closeModal('modal4')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240308154945/web2-(1).jpg" 
             alt="Web 2"
             class="modal-content">
        <div class="message"></div>
    </div>
    <div id="modal5" class="modal">
        <span class="close" 
              onclick="closeModal('modal5')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240322101847/Default_An_illustration_depictin-(2)-660.jpg"
             alt="Cyber security" class="modal-content">
        <div class="message"></div>
    </div>
    <div id="modal6" class="modal">
        <span class="close" 
              onclick="closeModal('modal6')">
          &times;
          </span>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20230416201559/DevOps-Roadmap.webp" 
             alt="Devops" class="modal-content">
        <div class="message"></div>
    </div>

    <script>
        function openModal(modalId, index) {
            let modal = document.getElementById(modalId);
            modal.style.display = "flex";
            modal.classList.add("show");
            let message = modal.querySelector(".message");
            message.innerText = 
                  `You clicked on the ${index} image.`;
        }

        function closeModal(modalId) {
            let modal = document.getElementById(modalId);
            modal.classList.remove("show");
            setTimeout(function () {
                modal.style.display = "none";
                modal.querySelector(".message").innerText = "";
            }, 300);
        }
    </script>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #12dea4;
}

.main-heading {
    color: #2051e6;
    text-align: center;
    margin: 20px 0;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0 20px;
}

.gallery-image {
    position: relative;
    width: calc(33.33% - 20px);
    margin: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-image:hover {
    transform: scale(1.1);
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 500px;
    max-height: 80%;
    border-radius: 5px;
    overflow: hidden;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.modal.show {
    display: flex;
    opacity: 1;
}

.close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.close:hover {
    transform: rotate(45deg);
}

.message {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(13, 219, 6, 0.7);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
}

@media screen and (max-width: 768px) {
    .gallery-image {
        width: calc(50% - 20px);
    }
}

@media screen and (max-width: 480px) {
    .gallery-image {
        width: calc(100% - 20px);
    }
}

Output:

How to Create Responsive Modal Images using CSS & JavaScript?

skaftafh

Improve

Article Tags :

Similar Reads

How to Create Image Magnifier using HTML CSS and JavaScript?

An image magnifier is a feature that allows users to zoom into specific parts of an image, simulating a magnifying glass effect. Itâ€™s created using HTML for structure, CSS for styling, and JavaScript to control the zoom functionality dynamically on hover or click.There are two methods to create an i

How to Create a Responsive Image Grid using CSS?

A responsive image grid is a layout technique used to display images in a grid-like structure that adjusts dynamically based on the screen size to ensure that the grid looks good and functions well across various devices and screen resolutions. Below are the approaches to creat a responsive image gr

How to Create a Modal Box using HTML CSS and JavaScript?

We will learn how to create a modal dialog box using HTML, CSS, and JavaScript. A modal is a pop-up dialog that appears on top of the main content and requires the user to interact with it before returning to the main screen.Approach to Create Modal BoxHTML Structure:Create a button that opens the m

How to Create a Responsive Image Gallery using CSS?

Creating a responsive image gallery using CSS is a common task in web development. A responsive gallery adjusts to different screen sizes and ensures that images look good on devices ranging from mobile phones to desktop monitors. In this article, we will explore different approaches to creating a r

How to Create Image Gallery using JavaScript?

An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Her

How to Create Image Lightbox Gallery using HTML CSS and JavaScript ?

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction,

Creating a Custom Image Slider using JavaScript

What is an image slider?An image Slider or Image Carousel is an expedient way to show multiple images on a website. Alluring flashy images can draw many visitors to the site. The below image shows a sample image slider: In this post, we will create the above image slider using HTML, CSS and JavaScri

How to Create a Custom Image Magnifier using jQuery ?

Glimpse of Image magnifier: An image magnifier is the zooming capability of your cursor point. Where you placed your cursor in the define div the image will be popped out in zoom mode. Like in the shopping sites, when you want to purchase any kind of cloth and want to check the material or print on

How to create and use CSS Image Sprites ?

In this article, we are going to learn how we can how to create and use CSS Image Sprites.CSS Image Sprites are nothing but a way to reduce the HTTP requests from the image resources. A CSS Image Sprite is a single image file containing all images on a document page. Image sprites are advantageous s

How to make a HTML div responsive using CSS ?

The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem