It's generally done with a combination of CSS and JavaScript. The "window" is a DIV (or other HTML element) that has its initial CSS styling include "display: none;". Then JavaScript is triggered by an event such as "onclick" to change the style to "display: block;".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Pop-Up Test</title>
<style type="text/css">
body {
font: 90% arial, sans-serif;
margin: 0;
padding: 1em 2em;
}
#window {
display: none;
position: absolute;
top: 2em;
left: 20%;
width: 15em;
height: 10em;
background-color: #ccc;
color: #630;
padding: 1em;
border: outset 3px #ccc;
}
</style>
<script type="text/javascript">
function openit(id)
{
document.getElementById(id).style.display='block';
}
function closeit(id)
{
document.getElementById(id).style.display='none';
}
</script>
</head>
<body>
<h1>This is a test</h1>
<p><a href="#" onclick="openit('window');return false">Open "window"</a></p>
<div id="window">
<h3>It is only a test</h3>
<p><a href="#" onclick="closeit('window');return false">Close window"</a></p>
</body>
</html>
