This is just a really easy lightbox that can be used, created with minimal javascript and css

!-easy-lightbox.md

Easy Lightbox

This is just a really easy lightbox that can be used, created with minimal javascript and css, but has a bit of life and animation!

Demo is visible here https://codepen.io/zephyr/pen/XgzEyP

lightbox.html

<div class="lightbox">
    <div class="lightbox-content">
        <div class="closer"></div>
        <h2 class="lightbox-title">
            <!-- The lightbox title -->
        </h2>
        <div class="scrolling-content">
            <!-- Content for the lightbox -->
        </div>
    </div>
</div>

lightbox.js

/**
 * Requires jQuery!
 */
var lightboxTriggers = $(/* Whatever element is the trigger for the lightbox */);
if(!!lightboxTriggers.length){
    var closeLightbox = function(lightbox){
        lightbox.removeClass('active');

        setTimeout(function(){
            lightbox.css({
                'display': 'none'
            });
        }, 310);
    };

    lightboxTriggers.each(function(){
        var trigger = $(this);

        trigger.on('click', function(e){
            e.preventDefault();

            var lightbox = trigger.next();

            lightbox.css({
                'display': 'block'
            });

            setTimeout(function(){
                var escapeLightbox = function(e){
                    /**
                     * On hitting the escape key, close the lightbox
                     * and remove the binding
                     */
                    if(e.which === 27){
                        e.preventDefault();

                        closeLightbox(lightbox);

                        $('body').off('keyup', escapeLightbox);
                    }
                };

                lightbox.addClass('active');

                $('body').on('keyup', escapeLightbox);

                lightbox.on('click', function(e){
                    if($(e.target).hasClass('lightbox')){
                        e.preventDefault();

                        closeLightbox(lightbox);

                        return false;
                    }
                });

                lightbox.find('.closer').on('click', function(e){
                    e.preventDefault();

                    closeLightbox(lightbox);

                    return false;
                });
            }, 10);

            return false;
        });
    });
}

lightbox.scss

.lightbox {
    display: none;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.9);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9001;
    transform: translate3d(0, -10px, 0);
    transition: opacity 0.3s, transform 0.3s;

    &.active {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    .lightbox-title {
        margin: 0;
        height: 48px;
        line-height: 48px;
        overflow: hidden;
        width: calc(100% - 80px);
    }

    .lightbox-content {
        position: relative;
        float: left;
        left: 32px;
        top: 32px;
        width: calc(100% - 64px);
        height: calc(100% - 64px);
        border-radius: 0.5em;
        border: 3px solid rgba(0, 0, 0, 0.2);
        background: #fff;
        padding: 32px;
        box-sizing: border-box;
    }

    .scrolling-content {
        position: relative;
        margin-top: 32px;
        max-height: calc(100% - 80px);
        overflow: auto;
        padding-right: 16px;
        box-sizing: border-box;
        
        p:first-child {
            margin-top: 0;
        }
        
        p:last-child {
            margin-bottom: 0;
        }
    }

    .closer {
        position: absolute;
        top: 32px;
        right: 32px;
        height: 48px;
        width: 48px;
        cursor: pointer;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            height: 4px;
            width: 32px;
            background: #333;
            transition: transform 0.3s;
        }

        &:before {
            transform: translate3d(-50%, -50%, 0) rotate(45deg);
        }

        &:after {
            transform: translate3d(-50%, -50%, 0) rotate(-45deg);
        }

        &:hover,
        &:focus {
            &:before {
                transform: translate3d(-50%, -50%, 0) rotate(-225deg);
            }

            &:after {
                transform: translate3d(-50%, -50%, 0) rotate(225deg);
            }
        }
    }
}