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:

HTML Code:

<!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:

Code:

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

Code:

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

Thread: Popups overlap

Thread Tools

Search Thread

Popups overlap

The Following User Says Thank You to rangana For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions