JSFiddle - React, Tailwind, and code Playground

by Brian Peacock

HTML

<div id="modal">
    <span id="close">&times;</span>
    <img id="modalImg">
    <div id="captionText"></div>
</div>
<div id="clickbox">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+1" class="clickable" title="This is image 1">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+2" class="clickable" title="This is image 2">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+3" class="clickable" title="This is image 3">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+4" class="clickable" title="This is image 4">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+5" class="clickable" title="This is image 5">
  <img src="https://dummyimage.com/200x135/442200/cccccc.png&text=image+6" class="clickable" title="This is image 6">
</div>

CSS

body {
     color:#444;
     background:#f3f5ff;
}
#clickbox, #modal {
    width:98%;
    height:auto;
    text-align:center;
    max-width:500px;
    margin:10px auto;
}
#modal {
    position:relative;
    background:#ccc;
    border:1px dotted #999;
    display:none;
}
#close {
    position:absolute;
    top:-6px;
    right:-6px;
    color:#000;
    background:#fff;
    font-size:12px;
    line-height:12px;
    text-align:center;
    border:2px solid #999;
    cursor:pointer;
    display:inline-block;
}
#close:hover {
    color:#ff3;
    background:#005;
}
#modalImg {
    width:100%;
    max-width:400px;
    height:auto;
    margin:20px auto 10px;
}
#captionText {
    line-height:24px;
}
.clickable {
    display:inline-block;
    margin:3px;
    border:2px solid #fff;
}
.clickable:hover {
    border-color:#900;
    cursor:pointer;
}

JavaScript

// dirty selection
    function $(a) {
        switch (a.slice(0,1)) {
            case "#":
                return document.getElementById(a.slice(1));
            default:
                return [].slice.call(document.getElementsByClassName(a.slice(1)));
        }
    }
    //////////////////////////////////////
    
    // define variables to hold the 'modal' Elements
    var modal, modalImg, captionText, close;

    // Event Handler
    function imageClicked(e) {
       // set modal Elements on first click
       !modal && (
            modal = $("#modal"),
            modalImg = $("#modalImg"),
            captionText = $("#captionText"),
            // find the 'close' button and 
            // add an event listener
            close = $("#close"),
            close.addEventListener("click", closeModal, !1)
        );

        // the clicked image
        var clickedImage = e.target;

        // set the Elements in the 'modal' box
        modalImg.src = clickedImage.src;
        captionText.textContent = clickedImage.title;
        modal.style.display = "block";
    }

    // Event Handler
    function closeModal(e) {
        modal.style.display = "none";
    }

    // Finally, add an event listener to
    // every image with a class .clickable
    $(".clickable").forEach(function(im) {
        im.addEventListener("click", imageClicked, !1);
    });