Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create responsive Modal Images with CSS and JavaScript?

Javascript Web Development Front End Technology

A modal is a dialog box/popup window that is displayed on top of the current page. Creating responsive modal images allows users to view enlarged versions of images that adapt to different screen sizes.

Responsive modal images are images that enlarge to fit the viewport based on device resolution, orientation, and screen size. When clicked, they open in a modal overlay with smooth animations and can be easily closed by users.

HTML Structure

First, create the basic HTML structure with an image and modal container:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <h2>Responsive Image Modal</h2>
    <img id="myImg" src="/images/sample-image.jpg" alt="Beautiful Landscape" style="width: 100%; max-width: 300px" />
    
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <span class="close">×</span>
        <img class="modal-content" id="img01" />
        <div id="caption"></div>
    </div>
</body>
</html>

CSS Styling

Add CSS to style the modal, create smooth animations, and ensure responsive behavior:

body {
    font-family: Arial, Helvetica, sans-serif;
}

#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {
    opacity: 0.7;
}

/* Modal Overlay */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

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

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

/* Zoom Animation */
.modal-content, #caption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

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

/* Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
}

/* Mobile Responsive */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

JavaScript Functionality

Add JavaScript to handle modal open/close events and image display:

<script>
// Get DOM elements
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var span = document.getElementsByClassName("close")[0];

// Open modal when image is clicked
img.onclick = function() {
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
};

// Close modal when X is clicked
span.onclick = function() {
    modal.style.display = "none";
};

// Close modal when clicking outside the image
modal.onclick = function(event) {
    if (event.target === modal) {
        modal.style.display = "none";
    }
};
</script>

Complete Working Example

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
    body {
        font-family: Arial, Helvetica, sans-serif;
        margin: 20px;
    }

    #myImg {
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s;
    }

    #myImg:hover {
        opacity: 0.7;
    }

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

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

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

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

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

    .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
    }

    @media only screen and (max-width: 700px) {
        .modal-content {
            width: 100%;
        }
    }
    </style>
</head>
<body>
    <h2>Responsive Image Modal Demo</h2>
    <p>Click the image below to open it in a modal:</p>
    
    <img id="myImg" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='200'%3E%3Crect width='100%25' height='100%25' fill='%23e3f2fd'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dy='.35em' font-size='16' fill='%23333'%3ESample Image%3C/text%3E%3C/svg%3E" alt="Sample landscape image" style="width: 100%; max-width: 300px" />
    
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <img class="modal-content" id="img01" />
        <div id="caption"></div>
    </div>

    <script>
    var modal = document.getElementById("myModal");
    var img = document.getElementById("myImg");
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    var span = document.getElementsByClassName("close")[0];

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

    span.onclick = function() {
        modal.style.display = "none";
    };

    modal.onclick = function(event) {
        if (event.target === modal) {
            modal.style.display = "none";
        }
    };
    </script>
</body>
</html>

Key Features

This responsive modal implementation includes:

  • Smooth animations: CSS keyframes provide a zoom-in effect when opening
  • Mobile responsive: Media queries ensure proper display on all screen sizes
  • Multiple close methods: Users can close via the X button or clicking outside
  • Caption support: Uses the image's alt attribute as the modal caption
  • Hover effects: Visual feedback when hovering over the thumbnail

Conclusion

This responsive modal image solution combines HTML structure, CSS styling, and JavaScript functionality to create an engaging user experience. The modal automatically adapts to different screen sizes and provides smooth animations for professional-looking image galleries.

Updated on: 2026-03-15T23:18:59+05:30

3K+ Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements