Modal image

Click picture to enlarge

Native image width: 1024px

×

The markup

<div class="relative" style="max-width: 700px;">

<p class="enlarge">Click picture to enlarge</p>

<img src="img/filename.jpg" style="width: 100%; max-width: 700px;" alt="Caption" class="modal-target">

</div>

<p class="caption">Caption</p>

<div id="modal" class="modal">
<div id="modal-close" class="modal-close">&times;</div>
<div><img src="#" alt="" id="modal-content" class="modal-content" style="width: 100%; max-width: 1200px;"></div>
<div id="modal-caption" class="modal-caption" style="width: 80%; max-width: 640px;"></div>
</div>

The JavaScript

// Modal Setup
var modal = document.getElementById('modal');

var modalClose = document.getElementById('modal-close');
modalClose.addEventListener('click', function() { 
  modal.style.display = "none";
});

// Global handler
document.addEventListener('click', function (e) { 
  if (e.target.className.indexOf('modal-target') !== -1) {
    var img = e.target;
    var modalImg = document.getElementById("modal-content");
    var captionText = document.getElementById("modal-caption");
    modal.style.display = "block";
    modalImg.src = img.src;
    captionText.innerHTML = img.alt;
  }
});

Info

Page last modified: 14 February, 2026