JSFiddle - React, Tailwind, and code Playground

by donabrams

HTML

<a id='howdy' href='/echo/html/'>yay</a>

JavaScript

var modal = (function(){
    var method = {},
        $overlay,
        $modal,
        $content,
        $close;

    // Center the modal in the viewport
    method.center = function () {
        var top, left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        $modal.css({
            top:top + $(window).scrollTop(), 
            left:left + $(window).scrollLeft()
        });
    };

    // Open the modal
    method.open = function (settings) {
        $content.append(settings.content);

        $modal.css({
            width: settings.width || 'auto', 
            height: settings.height || 'auto'
        })

        method.center();

        $(window).bind('resize.modal', method.center);

        $modal.show();
        $overlay.show();
    };

    // Close the modal
    method.close = function () {
        $modal.hide();
        $overlay.hide();
        $content.empty();
        $(window).unbind('resize.modal');
    };

    // Generate the HTML and add it to the document
    $overlay = $('<div id="overlay"></div>');
    $modal = $('<div id="modal"></div>');
    $content = $('<div id="content"></div>');
    $close = $('<a id="close" href="#">close</a>');

    $modal.hide();
    $overlay.hide();
    $modal.append($content, $close);

    $(document).ready(function(){
        $('body').append($overlay, $modal);                        
    });

    $close.click(function(e){
        e.preventDefault();
        method.close();
    });

    return method;
}());

$('a#howdy').click(function(e){
    $.post('/echo/html/', {
        html: 'yayness',
        delay: 1}, 
        function(data) {
            console.log(data);
            modal.open({content: '<h1>' + data + '</h1>'});
        }
    );
    e.preventDefault();
});