JSFiddle - React, Tailwind, and code Playground
HTML
<div class="divPop ui-widget" style="display: none">
<iframe width="650px" height="650px" src=""></iframe>
</div>
<input type="button" value="test" id="btn" class="btn" />
JavaScript
function openPopUp(url, divClass, title, width, height, btnOk) {
var b = [];
if (btnOk) {
b = [{ text: "OK", click: function () { jQuery("." + divClass).dialog('close'); } }];
}
var ifr = jQuery("." + divClass).find('iframe');
$("." + divClass).dialog({
modal: true,
autoOpen: true,
title: title,
width: width,
height: height,
resizable: false,
position: {
my: "center",
at: "center",
of: window,
within: window
},
buttons: b,
open: function () {
setTimeout(function () {
jQuery(ifr).attr('src', url);
}, 10);
},
close: function () {
jQuery(ifr).attr('src', 'about:blank');
jQuery(this).dialog('destroy');
}
});
}
$(document).ready(function () {
jQuery("#btn").click(function () {
openPopUp('https://jqueryui.com/dialog/', 'divPop', 'Add New Store', 650, 550, true);
return false;
});
});