JSFiddle - React, Tailwind, and code Playground

by aNt1X

HTML

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<div class="log">

</div>

<div class="one" style="display:none">ONE!</div>
<div class="two" style="display:none">TWO!</div>
<div class="three" style="display:none">THREE!</div>

JavaScript

$('a.one').on('click', function () {
    $('div.one').dialog()
    .focusin(function () {
        $('.log').append('<p>One got focus</p>');
    })
    .focusout(function () {
        $('.log').append('<p>One lost focus</p>');
    });
});

$('a.two').on('click', function () {
    $('div.two').dialog()
    .focusin(function () {
        $('.log').append('<p>Two got focus</p>');
    })
    .focusout(function () {
        $('.log').append('<p>Two lost focus</p>');
    });
});

$('a.three').on('click', function () {
    $('div.three').dialog()
    .focusin(function () {
        $('.log').append('<p>Three got focus</p>');
    })
    .focusout(function () {
        $('.log').append('<p>Three lost focus</p>');
    });
});