View Full Version : Popups overlap

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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


<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;}

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



<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 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 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.


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';}}

Hope that helps.