Lightbox

<div id="light_box">
    <div class="background">
        <div class="close_button">X</div>
        <div class="image_wrapper">
            <img src="" alt="">
        </div>
    </div>
</div>
                    

#light_box {
    // put the lightbox over everything but set it to display none until we need to show it.
    display: none;
    position: fixed;
    z-index: 100;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    .background {
        // set the background color to a dark grey and also make it cover the whole lightbox area, make its position relative for the absolute positioned elements inside it.
        background: rgba(0,0,0,.7);
        height: 100%;
        width: 100%;
        position: relative;
        .close_button {
            // Put the close button up the top right of the lightbox
            position: absolute;
            right: 15px;
            top: 15px;
            cursor: pointer;
            color: #fff;
        }
        .image_wrapper {
            // make the image holder cover all but 50px around the edge of the lightbox (giving room for the close button mainly).
            position: absolute;
            top: 50px;
            bottom: 50px;
            left: 50px;
            right: 50px;
            img {
                // Set the image to be in the middle of the image wrapper, and never higher or wider then the image wrapper.
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}
                    

window.onload = function(){ //code only run once the DOM has loaded
    var lightbox_manager = new function() { //define a function and run it immediately.
        this.container_element = document.getElementById("light_box"); //get a reference to the lightbox element.
        this.image_element = document.querySelectorAll("#light_box img")[0]; //get a reference to the image in the lightbox element.

        this.show_lightbox = function(data) { //call this method when you want to show the lightbox, and pass in a object with 'src' and 'alt' properties.
            this.image_element.src = data.src;
            this.image_element.alt = data.alt;
            this.container_element.style.display = "block";
        }

        this.hide_lightbox = function() { //call this method when you want to hide the lightbox.
            this.container_element.style.display = "none";
        }
    }
    window.lightbox_manager = lightbox_manager; //exposes the function to outside of the window.onload function, so it can be accessed everywhere (globally).
}
                    

// To show the light box with a image inside of it simply run
lightbox_manager.show_lightbox({
    src: "some/image/url.jpg",
    alt: "Some image alt name"
});

// To hide the light box run
lightbox_manager.hide_lightbox();