JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<div class="external_overlay"></div>
<div class="external_content">External content calling my application...</div>

<div id="my_dialog">Access forbidden. You should not be here.</div>

CSS

.external_overlay{
    z-index: 1000;
    height: 100%;
    width: 100%;
    background: pink;
    opacity: 0.5;
    position: fixed;
    top: 0;
    left: 0;
}
.external_content{
    z-index: 1010;
    position: relative;
}

JavaScript

// I cannot do nothing here. It's related to the structure of my application, a big one with plenty of components: I just cannot access the dialog before its instanciation here.
// So please consider this part in a black box :
// BEGIN BLACK BOX
$('#my_dialog').dialog({
    'modal': true
});
// END BLACK BOX

// So I can only do the following once that everything is *LOADED*
$('#my_dialog').dialog('close').dialog('option', 'appendTo', '.external_content').dialog( 'open' );
// ... You can see that only the dialog is moved, not its overlay who stays behind