Popup image wont close.

silverhorse

Baseband Member
Messages
23
Location
south africa
Hi.

I put this in
<script>

function OpenPopup (pic1,pic2,pic3,pic4)
window.open(pic1;
'window'
'width=300,height=400,scrollbars=yes,status=yes');
}
function closePopUp (pic1) {
window.close(pic1);
}

</script>

<body>
<div id="pic1"><a href="webpics/hat.JPG" onclick="OpenPopup(this.pic1); return false"; onclick="closePopup(pic1)"><img src="webpics/hat.JPG" width="100" height="100" alt="hat"><br>hat<br>R100</a></div>

but the image wont close.
If anyone can help me. Please.:neutral:
 
Good evening,

Remove the second 'onclick' attribute of the <a> tag and insert a simple if else statement at the top of your OpenPopup() function to check whether the image is already open. If true run the closePopUp() function, else open the image as normal.

That way it will only execute one part of the code depending on the return value from your popup check.

Have you got a live example of your code and I'll play around with it. I'm not 100% sure if what I told you above will work but that's what I'd be doing right now.

You cannot attach 2 onclick event handlers to the same element.



Kind regards,
 
Hi Labtec,
Thanks.
Here is the full page.

the site is called allcraftythings.com

Code:
<!DOCTYPE HTML PUBLIC"..//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv"content-type" contents="text/html;charset="UTF-8">
<title>ALL CRAFTY THINGS</title>
<meta name="description" content="allcraftythings">
<meta name="keywords" content="all things crafty and different, unusual, creative and odd.">
<style type="text/css">
<meta name="description" content="all crafts and things that are unusual and creative, odd"/>

body {
background-image:url ("antbackground.gif") position:absolute; background-position:center; z-index:2;  
}
#notice { display:block; position:absolute; z-index:4; top:30px; left:10px;
}
h1 { display:block; position:absolute; z-index:4; top:15px; left:400px; color:#a7od7c; font-family:Curlz MT;
}
#leftimage1 { display:block; position:absolute; z-index:3; left:16px; top:115px; width:150px; height:899px;
}
#topimage { display:block; position:absolute; z-index:3; left:10px; top:10px; 
}
#nav { display:block; position:absolute; z-index:4; left:50px; top:35px; width:500px; color:#d7bb49; text-decoration:none;
}
#nav li { display:inline; position:relative; z-index:4; left:100px; top:35px; width:500px; word-spacing:10px; padding:30px; color:#d7bb49; text-decoration:none;
}
#content { display:block; position:absolute; z-index:2; left:250px; top:120px; width:600px; font-size:20px; color:#c47b9d; font-weight:40px; text-decoration:none;
}
#zazzadvert { display:block; position:absolute; z-index:3; left:900px; top:500px;
}
#pic1 { display:block; position:absolute; z-index:3; left:300px; top:470px; width:120px; height:120px; 
}
#pic2 { display:block; position:absolute; z-index:3; left:500px; top:470px; width:120px; height:120px;
}
#pic3 { display:block; position:absolute; z-index:3; left:700px; top:470px; width:120px; height:120px;
}
#pic4 { display:block; position:absolute; z-index:3; left:300px; top:630px; width:120px; height:120px;
}
#pic5 { display:block; position:absolute; z-index:3; left:500px; top:630px; width:120px; height:120px;
}
#pic6 { display:block; position:absolute; z-index:3; left:700px; top:630px; width:120px; height:120px;
}
#pic7 { display:block; position:absolute; z-index:3; left:300px; top:800px; width:120px; height:120px;
}
#pic8 { display:block; position:absolute; z-index:3; left:500px; top:800px; width:120px; height:120px;
}
#pic9 { display:block; position:absolute; z-index:3; left:700px; top:800px; width:120px; height:120px;
}
#pic10 { display:block; position:absolute; z-index:3; left:900px; top:950px; width:120px; height:120px;
}
#pic11 { display:block; position:absolute; z-index:3; left:1000px; top:950px; width:120px; height:120px;
}
#images { display:block; position:absolute; z-index:2; left:100px; top:300px; margin:10px; padding:10px; word-spacing:10px;
}
#images li { display:inline; position:relative; z-index:2; left:100px; top:250px; margin:10px; padding:10px; word-spacing:10px;
}
#picnames { display:block; position:absolute; z-index:2; left:100px; top:320px; margin:50px; padding:50px; word-spacing:50px;
}
#picnames li { display:inline; position:relative; z-index:2; left:100px; top:320px; margin:10px; padding:30px; word-spacing:50px;
}
#popupscarf { ("scarf.JPG") display:block; position:absolute; z-index:3; left:100px; top:300px;
}
#arrows { display:block; position:absolute; z-index:3; left:300px; top:500px; margin:10px; padding:10px; word-spacing:10px;
}
#arrows li { display:inline; position:relative; z-index:3; left:300px; top:500px; padding:10px; margin:10px; word-spacing:10px;
}
#arrownumbers { display:inline; position:relative; z-index:2; left:619px; bottom:110px; padding:5px; margin:10px; word-spacing:75px;
}
#hitcounter { display:block; position:absolute; z-index:3; left:900px; top:930px;
}
a:hover { color:gold;
}
<script>
function OpenPopup(pic1,pic2,pic3,pic4)
window.open(pic1;
'window'
'width=300,height=400,scrollbars=yes,status=yes');
}
if
function closePopup(pic1){
window.close(pic1);
}

</script>


</style>
</head>

<body>
<div>SITE STILL UNDER CONSTRUCTION</div><img src="webpics/antbackground.gif"; width="100%" height="100%"><div id="notice">STILL UNDER CONSTRUCTION!</div>
<h1>ALLCRAFTYTHINGS</h1>
<div id="leftimage1"><img src="webpics/leftimage1.gif"; width="150px" height="899px"; alt="leftimage"></div>
<div id="topimage"><img src="webpics/topimage.gif"; width="1000px" height="100px"; alt="topimage"></div>
<div id="nav"><ul><li><a href="Index.html">Home</a></li><li><a href="Products.html">Products</a></li><li><a href="Purchase.html">Purchase</a></li><li><a href="allcontact.html">Contact</a></li></ul></div>
<div id="content"><p>Welcome to a site with a difference, where you can find unusual creative things from all over. ART, COLLECTIBLES, CURIOS AND ANYTHING UNUSUAL OR HARD TO FIND,
You may just find it here. Maybe something for the house, for the wooden hanger in the corner, something to add some color, or for decoration.
On our travels, we are always on the look out for unusual and nicethings, in the creative field. We often find nice and unusual things in the remote of places.
Its amazing what unrealized talent is out there, sometimes never to be discovered. Often people have gone underground,
and too shy to show what talent they have within them.
If you have something you find of interest and would like to advertise it here for sale, or would like to just browse or purchase something,
then feel free to do so. Maybe even something to swop with somebody.
<p>Click to Enlarge<br>
</div>
<div id="pic1"><a href="webpics/hat.JPG" onclick="popup(this.pic1); return false"><img src="webpics/hat.JPG" width="100" height="100" alt="hat"><br>hat<br>R100</a></div>
<div id="pic2"><a href="webpics/township.JPG" onclick="OpenPopup(this.pic2); return false"><img src="webpics/township.JPG" width="100" height="100"><br>township<br>R100</a></div><div id="pic3"><a href="webpics/scarf.JPG" onclick="OpenPopUp (this.pic3); return false"><img src="webpics/scarf.JPG"; width="110" height="110"><br>scarf<br>R100</a></div>
<div id="pic4"><a href="webpics/elephantface.JPG" onclick="OpenPopup(this.pic4); return false"><img src="webpics/elephantface.JPG" width="100" height="100" alt="hat"><br>elephantface<br>R120</div><div id="pic5"><a href="webpics/elephant.JPG" onclick="OpenPopUp (this.pic5); return false"><img src="webpics/elephant.JPG" width="100" height="100"><br>elephant<br>R150</div><div id="pic6"><a href="webpics/creativemind.JPG" onclick="OpenPopUp (this.pic6); return false"><img src="webpics/creativemind.JPG" width="100" height="100"><br>creativemind<br>R100</div><br>
<div id="pic7"><a href="webpics/horseinfield.JPG" onclick="OpenPopup(this.pic7); return false"><img src="webpics/horseinfield.JPG" width="100" height="100" alt="elephant"><br>horseinfield<br>R100</div><div id="pic8"><a href="webpics/rhinoalone.JPG" onclick="OpenPopUp (this.pic8); return false"><img src="webpics/rhinoalone.JPG"; width="100" height="100" alt="pic8">rhinoalone<br>R150</div><div id="pic9"><a href="webpics/knittedwintersocks.JPG" onclick="OpenPopUp(this.pic5); return false"><img src="webpics/knittedwintersocks.JPG" width="100" height="100">knittedwintersocks<br>R60</div><br>
<p id="demo"></p>
<div id="zazzadvert">
<a href="http://www.zazzle.com/?rf=238104935182708700"><img src="webpics/home_10.gif" width="141" height="57" alt="In association with Zazzle.com"></a>
</div>
<div id="hitcounter"><div align='center'><a href='http://www.hit-counts.com'><div align='center'><a href='http://www.hit-counts.com'><img src='http://www.hit-counts.com/counter.php?t=1273976' border='0' alt='Web Counter' /></a><br /><a href='http://www.hit-counts.com'>Web Counter</a></div>
</body>
</html>
 
Last edited by a moderator:
Back
Top Bottom