From your code it is hard to tell for sure, but I believe you are not actually talking about popup windows, but you are manipulating the DOM to display a particular div when a link is clicked on by changing it's style to display = "block", is how I am reading it.
As doing what you want would result in an extremely long statement in each of the onclick events, because you would also need to turn the other div's "off", it is better to do it with a javascript function in a script in the head of the document and turn each div on or off by changing the value of variables to be used by the function with arguments in the call to the function from the onclick events. See in my example how: on = "block"; and: off = "none"; The function will go through the 3 div's and turn each one on or off depending on what you tell it in the onclick events arguments, as each div's display property has been assigned a variable value. The variables a,b & c receive their values from the arguments in the onclick calls to the function here.
Try this out:
<!DOCTYPE -remember to use one of these
<html>
<head>
<title>Show and tell</title>
<style type="text/css">
.popupbox_box {display: none; position: absolute; left: 50px; top: 50px; border: solid #561721 1px; padding: 10px; text-align: justify; font-size: 12px; width: 400px;}
</style>
<script type="text/javascript">
<!--
var a;
var b;
var c;
var on = "block";
var off = "none";
function showNtell()
{
document.getElementById ("PopUp_x_1").style.display = a;
document.getElementById ("PopUp_x_2").style.display = b;
document.getElementById ("PopUp_x_3").style.display = c;
/*** In the three lines above, I left a space between the Id and first ( just so Yahoo would not drop the code - should take that space out ***/
}
//-->
</script>
</head>
<!--End Head-->
<body>
<div style="text-align:right;">
<a href="#" onclick="showNtell(a=on,b=off,c=off)">
PopUp 1</a>
</div>
<div id="PopUp_x_1" class="popupbox_box">
This is now the only thing that appears when PopUp 1 is clicked
</div>
<div style="text-align:right;">
<a href="#" onclick="showNtell(a=off,b=on,c=off)">
PopUp 2</a></div>
<div id="PopUp_x_2" class="popupbox_box">
And this is now the only thing that appears when PopUp 2 is clicked. See, no problem?
</div>
<div style="text-align:right;">
<a href="#" onclick="showNtell(a=off,b=off,c=on)">
PopUp 3</a></div>
<div id="PopUp_x_3" class="popupbox_box">
And this is now the only thing that appears when PopUp 3 is clicked. It's all good, oh yeah!
</div>
</body>
</html>
Javascript Popups overlap
Linear Mode
