JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<a href="http://www.bbc.co.uk" data-lightbox-type="iframe">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');
    
    ShowLightbox(type, content);
    
});

function ShowLightbox(type, content) {
    
    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': '500px',
            'height': '300px'
        });
        
        iframe.appendTo(contentArea);
        
    } else {
        alert("Unrecognised content type.");
        return;
    }
    
}

function ConstructLightbox() {
    
    var container = $('<div />', {
        'id': 'mynewlightboxcontainer',
        'style': 'position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.4); text-align: center;'
    });
    
    var inlineElement = $('<div />', {
        'style': 'display: inline-block; width: 1px; height: 100%; vertical-align: middle;'
    });
    
    var contentArea = $('<div />', {
        'style': 'display: inline-block; padding: 20px; background: #fff; vertical-align: middle;'
    });
    
    inlineElement.appendTo(container);
    contentArea.appendTo(container);
    
    container.appendTo('body');
    
    return contentArea;
    
}