JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/flick/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<button id="openModal" onclick='AbrirModal("http://www.javascriptkit.com", "Javascript Kit", 480, 360)'>
Abrir Modal
</button>
<iframe id="dialog" class="ui-helper-hidden">
</iframe>
CSS
.ui-dialog iframe {
box-sizing: border-box;
margin: 0px;
padding: 0px !important;
border: 0px none black;
width: 100% !important;
height: 100%;
}
JavaScript
var dialog = $("#dialog");
var openModal = $("#openModal");
dialog.dialog({
modal: true,
autoOpen: false,
});
dialog.load(function () {
dialog.dialog("open");
});
var AbrirModal = function (url, title, width, height) {
dialog.dialog("option", "width", width);
dialog.dialog("option", "height", height);
dialog.dialog("option", "title", title);
dialog.attr("src", url);
}