JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/ui-lightness/jquery-ui.css" media="screen" />


<div class="demo">
    
    <div title="Cuts of Beef" id="dialog">
        <p><img width="600" height="450" border="0" id="mapImage" usemap="#Map" name="emp" src="http://lydiarobertsdesign.com/testground/cow/images/cowlg.jpg">
            
        </p><div id="popupbox"> <!--Start popup box-->
        <h3>Chuck</h3><br>
        Recipes: List Here
        <br><br>
        [<a href="javascript:login('hide');">close</a>]
        <br>
        </div> <!--End box-->
    </div>
    
    <img width="235" height="161" style="cursor: pointer;" id="opener" alt="Cuts of Beef" src="http://lydiarobertsdesign.com/testground/cow/images/cow.png">
    
</div>

CSS

#popupbox, #dialog { display: none; }

JavaScript

$(function() {
    $('#opener').click(function() {
        $('#dialog').dialog({
            modal: true,
            height: 550,
            width: 800,
            hide: "explode",
            open: function() {
                $(this).click(function() {
                    $('#popupbox').show();
                });
            }
        });
    });
});