JSFiddle - React, Tailwind, and code Playground

by redky

HTML

<div class="pic-list">
<ul>
    <li><a href="http://1.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://2.com" data-origin="http://dummyimage.com/400"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://3.com" data-origin="http://dummyimage.com/500"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://4.com" data-origin="http://dummyimage.com/600"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://5.com" data-origin="http://dummyimage.com/300x700"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a>
  <li><a href="http://6.com" data-origin="http://dummyimage.com/300"><img src="http://dummyimage.com/100" alt="" /></a>
    </ul>
</div>

CSS

.pi-show, .pi-show body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.pi-show {
    overflow-y: auto;
}

.pi-mask {
    position: absolute;
    vertical-align: middle;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(0, 0, 0, .2);
    text-align: center;
    white-space: nowrap;
}

.pi-x {
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 1px;
    height: 100%;
    margin-right: -.31em;
    *margin-right: -.43em;
    overflow: hidden;
    vertical-align: middle;
}

.pi-anchor {
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
    overflow:hidden;
}

.pi-container {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
    margin: 20px auto;
    min-width: 20em;
    min-height: 20em;
    text-align: left;
    word-wrap: break-word;
    white-space: normal;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
}

.pi-container .bd {
    padding: 20px;
}

body, ul {
    padding: 0;
    margin: 0;
    text-align: center;
}
.pic-list {
    display: inline-block;
}
li {
    margin: 10px;
    list-style: none;
}
.pic {
    padding: 40px;
    text-align: center;
}

JavaScript

;(function () {
    
    var doc = $(document);
    var docRoot = $('html');
    var docBody = $('body');
    var defaultOptions = {};

    var TEMPL_UI = [
        '<div class="pi-mask" style="display:none;">',
        '<div class="pi-x"></div>                   ',
        '<div class="pi-container">                 ',
        '  <div class="hd"></div>                   ',
        '  <div class="bd"></div>                   ',
        '</div>                                     ',
        '</div>                                     '].join('');

    var TEMPL_ANCHOR = '<div class="pi-anchor"></div>';

    function Previewer() {
        this.init();
    };

    Previewer.prototype = {
        init: function () {
            var o = this;
            this.mask = $(TEMPL_UI).appendTo(docBody);
            this.anchor = $(TEMPL_ANCHOR).prependTo(docBody);
            this.container = this.mask.find('.pi-container');
            this.header = this.mask.find('.pi-container > .hd');
            this.body = this.mask.find('.pi-container > .bd');

            doc.delegate('.pi-mask', 'click', function (e) {
                if (e.target == o.container[0] || $.contains(o.container[0], e.target)) {
                    return;
                }
                o.close();
            });

            doc.bind('keyup', function (e) {
                if (!(/input|textarea/i.test(e.target.tagName)) && e.keyCode === 27) {
                    o.close();
                }
            });
        },

        open: function (options) {
            this.options = $.extend({}, defaultOptions, options || {});
            var top = this.docTop = doc.scrollTop();
            this.anchor.show().css({
                marginTop: -top
            });
            docRoot.addClass('pi-show');
            this.mask.show();
            this.setContent('<div class="pic"><img src="' + options.origin + '"></div>');
        },

        close: function () {
            docRoot.removeClass('pi-show');
...