JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<button id="opener">open the dialog</button>
<div>
    <div>
        <div>
            <div class="dialogs" id="d1" title="Dialog Title">I'm a dialog (1)</div>
        </div>
        <div class="dialogs" id="d2" title="Dialog Title">I'm a dialog (2)</div>
    </div>
    <div class="dialogs" id="d3" title="Dialog Title">I'm a dialog (3)</div>
</div>
<div id="top">
    <button data-which="#d1">Bring to top (1)</button>
    <button data-which="#d2">Bring to top (2)</button>
    <button data-which="#d3">Bring to top (3)</button>
</div>
<div id="debug"></div>

JavaScript

$(".dialogs").dialog({
    autoOpen: false
});
$("#opener").on('click', function () {
    $('.dialogs').each(function (i, v) {
        var elem = $(v);
        elem.dialog("open");
        elem.dialog({
            'position': [i * 10 + 60, i * 10 + 60]
        });
    });
});

$("#top button").on('click', function () {
    var elem = $(this);
    var dlg = elem.data('which');
    $(dlg).dialog("moveToTop");
    showZIndices();
});

function showZIndices() {
    var dbg = $('#debug');
    dbg.empty();
    $('.dialogs').each(function () {
        var dlg = $(this);
        dbg.append($('<p>').text(dlg.css('z-index')));
    });
}