JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<a href="http://www.bbc.co.uk" data-lightbox-type="iframe" data-content-width="180" data-content-height="320">Link 1</a>
<a href="https://www.google.com/images/srpr/logo11w.png" data-lightbox-type="img">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>

JavaScript

$('a[data-lightbox-type]').on('click', function(e) {
    e.preventDefault();
    
    var $this = $(this);
    
    var type = $this.attr('data-lightbox-type');
    var content = $this.attr('href');
    
    var contentWidth = 700;
    var contentHeight = 400;
    
    if ($this.attr('data-content-width') !== undefined) {
        contentWidth = parseInt( $this.attr('data-content-width') );
    }
    
    if ($this.attr('data-content-height') !== undefined) {
        contentHeight = parseInt( $this.attr('data-content-height') );
    }
    
    ShowLightbox(type, content, contentWidth, contentHeight);
    
});

function ShowLightbox(type, content, contentWidth, contentHeight) {
    
    var previouslightbox = $('#mynewlightboxcontainer');
    
    if (previouslightbox !== undefined || previouslightbox !== null) {
        previouslightbox.remove();
    }
    
    var contentArea = ConstructLightbox();
    
    if (type === 'img') {
        
        var img = $('<img />', {
            'src': content
        });
        
        img.appendTo(contentArea);
        
    } else if (type === 'iframe') {
        
        var iframe = $('<iframe />', {
            'src': content,
            'width': contentWidth,
            'height': contentHeight
        });
        
        iframe.appendTo(contentArea);
        
    } else {
        alert("Unrecognised content type.");
        return;
    }
    
}

function ConstructLightbox() {
    
    var container = $('<div />', {
        'id': 'mynewlightboxcontainer',
        'style': 'position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,0.4); text-align: center; cursor: pointer;'
    });

    container.on('click', function(e) {
        container.remove();
    });
    
    var close = $('<a />', {
        'href': '#',
        'text': 'Ă—',
        'style': 'position: absolute; right: 0; top: 0; width: 20px; text-decoration: none; color: #555; text-align: center; line-height: 20px;'
   ...