JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css" type="text/css" rel="Stylesheet" />

<div id="ImageDialog" style="display:none;height:500px;" class="ImageDialog ui-dialog">
    <div style="height:500px;">
        This is making me crazy!!!!
        <img class="productImage" src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" />
    </div>
</div>
<a href="#" class="open" >Open Dialog</a><br/>
<a href="#" class="close" >Close Dialog</a>

JavaScript

$(document).ready(function () {
    // init the image popup dialog
    $("#ImageDialog").dialog({ autoOpen: false, height: 500 });
    
    $(".open").click(function()
                 {
                     $("#ImageDialog").dialog("open");
                 });
    
    $(".close").click(function()
                 {
                     $("#ImageDialog").dialog("close");
                 });
});