PDA

View Full Version : Popups overlap



spirofantasio
08-01-2008, 11:22 PM
I have some javascript commands which make a pop-up window appear on the other sde of the broswer. There are three pop-ups. The problem is if you click on one and then another they overlap.

What I want is for a popup to close when another is opened.

Any ides?

Here is the code so far:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>PopUp</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>

<link href="scripts/styling.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div align="right">
<a onmouseover="this.style.cursor='pointer'" onclick="document.getElementById('PopUp_x_1').style.display = 'block'" >PopUp 1</a></div>

<div id="PopUp_x_1" class="popupbox_box">
This is what appears when PopUp 1 is clicked
</div>

<div align="right">
<a onmouseover="this.style.cursor='pointer'" onclick="document.getElementById('PopUp_x_2').style.display = 'block' " >PopUp 2</a></div>

<div id='PopUp_x_2' class="popupbox_box">
And this appears when PopUp 2 is clicked. See the problem?
</div>


<div align="right">
<a onmouseover="this.style.cursor='pointer'" onclick="document.getElementById('PopUp_x_3').style.display = 'block' " >PopUp 3</a></div>

<div id='PopUp_x_3' class="popupbox_box">
And the same here.
</div>

</body>
</html>

rangana
08-02-2008, 04:10 AM
Add highlighted:


<a onmouseover="this.style.cursor='pointer'" onclick="reset();document.getElementById('PopUp_x_1').style.display = 'block'" >

<a onmouseover="this.style.cursor='pointer'" onclick="reset();document.getElementById('PopUp_x_2').style.display = 'block' " >

<a onmouseover="this.style.cursor='pointer'" onclick="reset():document.getElementById('PopUp_x_3').style.display = 'block' " >


And have this script:


<script type="text/javascript">
function reset(){
var del=['PopUp_x_1','PopUp_x_2','PopUp_x_3']; // Place all those popup box in this array
for(var i=0;i<del.length;i++){document.getElementById(del[i]).style.display='none';}}
</script>


Hope that helps.