...

View Full Version : CSS popup not closing... hmm... what to do?



Masonan
10-15-2008, 04:12 PM
The code below is used to make a css popup (with opacity) that allows a user to scroll through an xml database of user information. Towards the end of the javascript, the html users database tables are generated. The problem that I've been having is that when the javascript generates this popup, it will not allow the user to close it using the close button. Also, the mouse cursor goes back to that of text instead of staying as a pointer like I set it.

Any corrections would greatly be appreciated.


Click <a onmouseover='this.style.cursor="pointer" ' onfocus='this.blur(); display();' onclick="document.getElementById('PopUp9').style.display = 'block' " >
<span style="text-decoration: none; color: #316191;"><b>here</b></span></a> to meet our board of directors.

<div id='PopUp9' style='display: none; position: absolute; left: 500px; top: 400px; border: solid #316191 2px; padding: 10px;
background-color: #7b9ab9; text-align: justify; width: 400px; height: 420px; opacity:0.95;filter:alpha(opacity=95)'>

<div id='show' style='position: absolute; border: solid black 1px; padding: 10px; background-color: #316191; text-align: justify; font-size: 12px; width: 379px; height: 399px;'>


<script type="text/javascript">
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}

xmlDoc.async=false;
xmlDoc.load("cd_catalog.xml");
var x=xmlDoc.getElementsByTagName("CD");
i=0;

function next()
{
if (i<x.length-1)
{
i++;
display();
}
}

function previous()
{

if (i>0)
{
i--;
display();
}
}

function display()
{
name=(x[i].getElementsByTagName("NAME")[0].childNodes[0].nodeValue);
picture=(x[i].getElementsByTagName("PICTURE")[0].childNodes[0].nodeValue);
company=(x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue);
address=(x[i].getElementsByTagName("ADDRESS")[0].childNodes[0].nodeValue);
position=(x[i].getElementsByTagName("POSITION")[0].childNodes[0].nodeValue);

document.getElementById("show").innerHTML="<center><br><table width='365' height='30' style='border: solid #000000 2px;'><td width=50&#37; style='vertical-align: middle;'><a onmouseover='this.style.cursor='pointer'' onclick='previous()'><span style='text-decoration: none; color: #7b9ab9;'><b>< PREV </b></span></a></td><td width=50% align='right' style='vertical-align: middle;'><a onmouseover='this.style.cursor=pointer' onclick='next()'><span style='text-decoration: none; color: #7b9ab9;'><b> NEXT ></span></b></span></a></td></table><table width='365' height='30' style='border: none;'><td width=100% style='vertical-align: middle;'><center><img src='images/crossbullet.png'>&nbsp;<span style='font-size: 16;'><b>Board of Directors</b></span>&nbsp;<img src='images/crossbullet.png'></center></td></table><table width='365' height='185' style='border: solid #000000 2px;'><td width='50%' style='vertical-align: top;'><b>Name:&nbsp;</b>" + name + "</td><td width='50%'><img src="+ picture +" height='180' width='178' / ></td></table><table width='365' style='border: solid #000000 2px; border-top-width: 0px;'><td width='100%'><b>Company:&nbsp;</b>"+ company +"</td></table><table width='365' style='border: solid #000000 2px; border-top-width: 0px;'><td width='100%'><b>Address:&nbsp;</b>"+ address +"</td></table><table width='365' style='border: solid #000000 2px; border-top-width: 0px;'><td width='100%'><b>Position(s):&nbsp;</b> " + position + " </td></table><br><div style='text-align: right;'><a onmouseover='this.style.cursor='pointer'' style='font-size: 12px;' onfocus='this.blur();' onclick='document.getElementById('Popup9').style.display='none''><span style='text-decoration: underline;'>Close</span></a></div>";
}
</script>

<center><br><table width='365' height='30' style='border: none;'><td width=100%><center><img src='images/crossbullet.png'>&nbsp;<span style='font-size: 16;'><b>Board of Directors</b></span>&nbsp;<img src='images/crossbullet.png'></center></td></table>
<br>
<table>
<td><p>The work of the Central Virginia Chapter of American Red Cross is to enable people throughout its jurisdiction to live safer, healthier lives, to cope with emergencies, and to return to normalcy in the aftermath of a disaster.</p>
<p>Services will be responsive to the needs of the people, consistent with the standards and mission of the American Red Cross and guided by the Fundamental Principles of the International Red Cross Movement.</p></td>
</table>
<br>
<table width='365' height='30' style='border: none;'><td width=100%><a onmouseover='this.style.cursor="pointer"' onclick='next()'><span style="text-decoration: none; color: #7b9ab9;"><b><center>Click to view the profiles<br> of our volunteer leadership.</center></b></span></a></td></table>
<br>
<br>
<br>
<div style='text-align: right;'><a onmouseover='this.style.cursor="pointer" ' style='font-size: 12px;' onfocus='this.blur();'
onclick="document.getElementById('Popup9').style.display = 'none' " ><span style="text-decoration: underline;">Close</span></a>
</div>
</div>
</div>

<br><br>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum