JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button>Open the dialog</button>
<div id="subdashboard-box">
    <iframe class="subdashboard" id="subdashboard" name="subdashboard" src=""></iframe>
</div>

CSS

#subdashboard-box {
    background: #f7f7ff no-repeat scroll center center !important;
    display: none;
}
#subdashboard-box.bgOff {
    background: none repeat scroll 0 0 transparent !important;
}
#subdashboard {
    border: medium none;
    height: 100%;
    width: 100%;
}
.hide {display: none;}

JavaScript

// Parent JS creating DIALOG - all of this works.
    function afterOpen() {
        $('body').css({overflow:'hidden'});
        $('#subdashboard')
            .addClass('hide')
            .parent().removeClass('bgOff')
            .end().prop({
            src: 'http://jsfiddle.net/szKnm/4/show/'
        }).removeClass('hide');
    }

    function beforeClose() {
        var $dialog = $('#subdashboard').unbind('load').prop({
            src: null
        });
        $('body').removeClass('no-scroll');
    }

    $('#subdashboard-box').dialog({
        autoOpen: false,
        close: beforeClose,
        buttons: {
            "New Window": function() {},
            "Refresh": function() {},
            "Close": function() {}
        },
        height: 600,
        hide: 'scale',
        modal: true,
        open: afterOpen,
        show: 'scale',
        width: 800
    });
$('button').button().click(function(){ $('#subdashboard-box').dialog('open') });