JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<a href="#" onclick="show_new_window('aaa', 600, 300, 123)">show</a>

JavaScript

function show_new_window(title, width, height, window_id) {
	
	var container = document.createElement("div"); 
	container.id = window_id;
	container.style.border = "1px solid black";
	container.style.position = "absolute";
	container.style.zIndex = "10";
	container.style.width = width;
	container.style.height = height;
	container.style.top = "150px";
	container.style.left = "400px";
	container.style.backgroundColor = "white";
	document.body.appendChild(container);
	
	var title_con = document.createElement("div");
	title_con.style.borderBottom = "1px solid black";
	title_con.style.width = width;
	title_con.style.height = "20px";
	title_con.style.marginTop = "0px";
	container.appendChild(title_con);
	
	var tit = document.createElement("div");
	tit.style.fontSize = "large";
	tit.style.width = "175px";
	tit.style.float = "left";
	tit.style.paddingLeft = "10px";
	tit.innerHTML = title;
	title_con.appendChild(tit);
	
	var exit = document.createElement("div");
	exit.id = "exit_button";
	exit.style.fontSize = "large";
	exit.style.float = "right";
	exit.style.paddingRight = "10px";
	exit.style.cursor = "pointer";
	title_con.appendChild(exit);

	var exit_button 	= document.createElement("a");
		exit_button.setAttribute("id", "exit button");
		exit_button.style.color = "#000000";
		exit_button.innerHTML = "X";
		exit_button.onclick = function() {
			document.getElementById(window_id).style.display = "none";
            document.getElementById(window_id).id = "";
		}
	exit.appendChild(exit_button);
	
}