A technique that took about 15 mins to create, is lightweight, and responsive. Most importantly, it gets the job done.

Demo

The Code

First up, a few simple lines of CSS. The modal background obtains a fixed position and a high z-index, a darkened background, and some slight padding so our image doesn’t bump the sides.

.img-modal {
    background: rgba(0,0,0,0.6);
    display: none;
    height: 100%;
    padding: 3em;
    position: fixed;
    width: 100%;
    z-index: 100;
}

.img-modal img {
    height: auto;
    max-height: 95%;
    max-width:100%;
    width: auto;
}

Optionally, you may add a media query to remove side padding for mobile:

@media (max-width: 480px) {
.img-modal {
    padding: 3em 0;
}
}

Finally, add a small bit of jQuery. For my purposes, I knew I’d always be targeting elements within a certain wrapper, so that part will need changed according to your need.

This code creates our <div class="img-modal"> and appends it to the body element. It then clones the image that was clicked and places it into the created div. The modal close is triggered on a second click, which fades out and removes the whole div.

$('.your-selector img').on('click', function(e) {
    var img = $(this);
    $('body').prepend('<div class="img-modal" />');
    img.clone().prependTo('.img-modal');
    $('.img-modal').fadeIn();
});

$('body').on('click', '.img-modal', function() {
    $(this).fadeOut().remove();
});

Related Topics

CSS | Responsive Design | Snippets