JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<button id="clicked" type="button" onclick="iframe_open()">Click Me!</button>

</body>

JavaScript

document.getElementById("clicked").onclick = function iframe_open() {

	var div = document.createElement('div');
	div.style.position = 'absolute';
	div.style.backgroundColor = 'rgba(0,0,0,0.1)';
	div.style.minHeight = '100%';
	div.style.minWidth = '100%';
	div.style.top = '0px';
	div.style.left = '0px';
	div.id = 'overlay';
	div.style.zIndex = '10000000';
	document.body.appendChild(div);
	
	var z = document.createElement('div');
	z.style.position = 'absolute';
	z.style.top = '150px';
	
	z.style.right = '0';
	z.style.backgroundColor = 'black';
	z.style.width = '325px';
	z.style.height = '175px';
	z.id = 'popup';
	z.style.zIndex = '10000001';
    //z.style.left = (($(window).width() - $(z).outerWidth()) / 2) + "px";
	document.body.appendChild(z);



    $( "#popup" ).draggable();
	
	$("#overlay").click(function() {
	
		var elem = document.getElementById("overlay");
		
		elem.parentNode.removeChild(elem);
		
		var elem2 = document.getElementById("popup");
		
		elem2.parentNode.removeChild(elem2);
	
	});

}