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/16/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')
});