JSFiddle - React, Tailwind, and code Playground

HTML

<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<div id="clickForDialog">
    <p>I work with jquery-ui 1.9.2 and 1.10.3</p>
    <button id="btnClick">Click for dialog</button>
    <div id="dlgClick" title="Click Dialog">
        <p>My overlay is always removed =)</p>
    </div>
</div>

<div id="focusForDialog">
    <p>I work with jquery-ui 1.9.2, but not 1.10.3</p>
    <input id="txtFocus" type="text" />
    <div id="dlgFocus" title="Focus Dialog">
        <p>My overlay doesn't get removed in 1.10.3 =(</p>
    </div>
</div>

JavaScript

$(document).ready(function() {
    $('#dlgClick').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Close": function() {
                $(this).dialog('close');
            }
        }
    });
    $('#btnClick').button().click(function() {
        $('#dlgClick').dialog('open');
    });
    
    $('#dlgFocus').dialog({
        autoOpen: false,
        modal: true,
        buttons: {
            "Close": function() {
                $(this).dialog('close');
            }
        }
    });
    $('#txtFocus').focus(function() {
        $('#dlgFocus').dialog('open');
    });
});