Maybe this will get you started in the right direction :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function toggle(pop) {
if (document.getElementById(pop).style.visibility == "visible") {
document.getElementById(pop).style.visibility = "hidden"
}
else {
document.getElementById(pop).style.visibility = "visible"
}
}
</script>
<style type="text/css">
#ad1, #ad2, #ad3 { background:#FAA ; border:2px solid #000 ; color:#000 ; font-family:sans-serif ; padding:100px 5px ; position:absolute ; top:20px ; left:20px ; width:300px ; visibility:hidden ; z-index:1 }
</style>
</head>
<body>
<div id="ad1"><p align="center"><strong>#1</strong> Hello. I am a popup.<br>I want to be your friend.<br><br><a href="#" onclick="toggle('ad1')">Close Me</a></p></div>
<div id="ad2"><p align="center"><strong>#2</strong> Hello. I am a popup.<br>I want to be famous.<br><br><a href="#" onclick="toggle('ad2')">Close Me</a></p></div>
<div id="ad3"><p align="center"><strong>#3</strong> Hello. I am a popup.<br>I want to be left alone.<br><br><a href="#" onclick="toggle('ad3')">Close Me</a></p></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra. <a href="#" onclick="toggle('ad1')">More info</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra. <a href="#" onclick="toggle('ad2')">More info</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean porta ultrices magna. Vivamus ut risus a turpis pretium viverra. <a href="#" onclick="toggle('ad3')">More info</a></p>
</body>
</html>
Save that code as an .html document, and you'll see how it works. HTH!
