Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS popup not closing... hmm... what to do?

    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.

    Code:
    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>
    Last edited by Masonan; 10-15-2008 at 04:19 PM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •