JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fooChartButton">CLICK HERE</div>
<div id="fooChartDialog">CLICK HERE</div>

CSS

#fooChartButton
{
    height:50px;
    width:100px;
    border:2px dotted green;
}

JavaScript

$(document).ready(function fooDialog() {

    $('#fooChartDialog').dialog({
        autoOpen: false,
        height: 400,
        width: 300,
        resizable: false,
        buttons: {
            "Drill Down Report": function () {
                window.open('example.com');
            },
            "Close": function () {
                $('this').dialog("close");
            }
        },
        open: function () {
            $('#fooChartDialog').load($('#fooChartDialog').data('url'), function () {
                fooChartLoad()
            });
        },
        title: 'Customer Satisfaction Chart',
        modal: true
    });

    $('#fooChartButton').click(function () {
        $('#fooChartDialog').dialog("open")
    });
});