JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<link href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

<div class="liveviewtriggerDialog" style="display:none" title="Module preview">
    <div class="liveviewHeader">
        <input type="hidden" class="base_m_url" value="" />
        <table>
            <tr>
                <td><a class="reloadBtn">Herladen</a></td>
                <td>&nbsp;</td>
                <td><input type="text" class="m_url_prefix" size="70" value="/" /></td>
                <td><a class="m_url_prefix_submit">Ga</a></td>
            </tr>
        </table>
    </div>
    <div class="liveviewContent"></div>
</div>

<button class="liveviewtrigger">Open</button>

JavaScript

$(".liveviewtrigger").click(function(e){
    e.preventDefault();
    var wHeight = $(window).height() * 0.95;
    var wWidth = $(window).width() * 0.95;
    var href = $(this).attr("href");
    
    $(".liveviewtriggerDialog").dialog({
        width: wWidth,
        height: wHeight,
        buttons: {
            "Sluiten": function(){
                $(this).dialog("close");
            }
        },
        resizable: false,
        draggable: false,
        modal: true,
        open: function(){
            $(".m_url_prefix").blur();
            $(".liveviewContent").html('<iframe class="iPrev" height="94%" width="98%" src="'+href+'"></iframe>');
            $(".base_m_url").val(href);
        },
        close: function(){
            $(".liveviewContent").html('');
            $(".base_m_url").val('');
            $(".m_url_prefix").val('/');
        }
    });
});