JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<a href="http://new.doslab.ru/sites/default/files/otzyv_001.jpg"           class="modal-image" title="asdasds">
    <img src="http://new.doslab.ru/sites/default/files/styles/carouselka/public/otzyv_001.jpg?itok=WpjgIlW1"  />
</a>


<a href="http://new.doslab.ru/sites/default/files/otzyv_001.jpg"           class="modal-image" title="asdasds">
    <img src="http://new.doslab.ru/sites/default/files/styles/carouselka/public/otzyv_001.jpg?itok=WpjgIlW1"  />
</a>

JavaScript

jQuery.fn.modalImage = function () {
    console.log(this)
    for (var i = 0; i < this.length; ++i) {
        $(this[i]).click(function (event) {
            event.preventDefault();
            var src = this.href;
            var o = document.createElement('div');
            o.setAttribute('style', 'background-color: rgb(0, 0, 0); position: fixed;\
		width: 100%; min-height: 100%; overflow: hidden; opacity: 0.9; top: 0px;\
		left: 0px; color: rgb(255, 255, 255);');
            try {
                o.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 90;
            } catch (e) {}

            var w = document.createElement('div');
            w.setAttribute('style', 'overflow: auto; width: 95%; position: fixed;\
		background-color: rgb(255, 255, 255); height: 90%; top: 5%; left: 0px; right: 0px;\
		margin: 0px auto; color: rgb(0, 0, 0);');

            var c = document.createElement('div');
            c.setAttribute('style', 'position:fixed;right:10px;top:10px;padding:2px 8px;background:#E04343;color:#fff;text-decoration:none;cursor:pointer;font-size: 14px;font-family: monospace;');
            c.addEventListener("click", function () {
                var r = document.getElementById('modal-image-collection')
                r.parentNode.removeChild(r);
            }, false);
            c.innerHTML = 'X';
            w.appendChild(c);

            var i = document.createElement('img');
            i.setAttribute('src', src);
            i.setAttribute('style', 'width: 100%;');
            w.appendChild(i);

            var collect = document.createElement('div');
            collect.setAttribute('id', 'modal-image-collection')
            collect.appendChild(o);
            collect.appendChild(w);
            document.body.appendChild(collect);
        });
    }

};

$(document).ready(function () {
    $(".modal-image").modalImage();
});