JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="page">
    <p>My page</p>
    <p>
        <button id="btn">Show modal</button>
    </p>
</div>

CSS

body {
    font-family:verdana;
    color:#eee;
}
#page {
    width:400px;
    height:500px;
    margin:1em;
    padding:1em;
    background:#333;
}

JavaScript

function showModal(options) {

    var modalId = 'app-modal',
        modalTemplate = '<div style="display:none"></div>',
        $modal = $('#' + modalId),
        exists = $modal.length !== 0,
        settings = {
            animation: false, // trouble maker
            draggable: false,
            modal: true,
            resizable: false,
            visible: false,
            title: false,
            width: 48,
            height: 48
        };

    if (!exists) $modal = $(modalTemplate).attr('id', modalId);
    $.extend(settings, options);
    $modal.html(options.htmlContent);
    $modal.kendoWindow(settings).data('kendoWindow').open().center();
    //return $modal;
}

$('#btn').click(function () {
    
        showModal({
            
            htmlContent: '<img src="http://www.sanbaldo.com/wordpress/wp-content/bigrotation2.gif" />'
        });
    
});