JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dialog">
    <iframe id="myIframe" src=""></iframe>
</div>
<button id="opener1">Open Dialog</button>
<button id="opener2">Open Dialog</button>

JavaScript

$(function () {
    $("#dialog").dialog({
        autoOpen: false,
        show: "fade",
        hide: "fade",
        modal: true,
        height: 'auto',
        width: 'auto',
        resizable: true,
        title: 'Vessels',
        close: function( event, ui ) {
           $('#myIframe').attr('src', '');
         }
    });

    $("#opener1").click(function () {
        $('#myIframe').attr('src', 'http://www.w3schools.com');
        $("#dialog").dialog("open");
        return false;
    });

    $("#opener2").click(function () {
        $('#myIframe').attr('src', 'http://www.example.com/');
        $("#dialog").dialog("open");
        return false;
    });
});