JSFiddle - React, Tailwind, and code Playground

by JellyBelly

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div>
    <a dialogtitle="title of dialog" href="test1" class="openDialogWithDetails" title="Show">
    <img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/info-large-24.png">
    </a>
</div>
    
<div id="test1" style="display:none">
    <a dialogtitle="title of dialog" href="testWork" class="openDialogWithDetails" title="Show">
    <img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/info-large-24.png">
    </a>
        
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        
    <a dialogtitle="title of dialog" href="testNotWork" class="openDialogWithDetails" title="Show">
    <img src="https://cdn0.iconfinder.com/data/icons/typicons-2/24/info-large-24.png">
    </a>        
</div>    
    
<div id="testWork" style="display:none">
    Work
</div>    
    
<div id="testNotWork" style="display:none">
    Not Work
</div>

JavaScript

$(document).on("click", 'a.openDialogWithDetails', function () {
    var a = $(this);
    $('#' + a.attr('href')).dialog({
        modal: true,
        close: function () {
            $(this).dialog("close");
        },
        width: 150,
        height: 150,
        title: a.attr('dialogTitle')
    });
    return false;
});