JavaScript - Center Javascript Popup Help? Missing Close Button.

<style type="text/css">
<!--
#eucookielaw { display:none }

#note {
    position: fixed;
    z-index: 101;
    bottom: 0;
    left: 0;
    right: 0;
    background: #98FB98;
    text-align: center;
    vertical-align: middle;
    color: #2C2C2C;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

#note a {
    color: #2C2C2C;
}


#note img {
    vertical-align: middle;
}

#close {
    cursor: pointer;
}

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

.cssanimations.csstransforms #close {
  display: none;
}
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SetCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+";path=/"+((expiredays==null) ? "" : ";expires="+exdate.toUTCString())
}
</script>

<div id="eucookielaw" >
<div id="note">
    <img src="/images/cookie_sm.png" alt="Cookie" border="0"> This Site Uses Cookies. &nbsp; :: &nbsp; <a rel="nofollow" href="/terms.php">Learn More</a> &nbsp; :: &nbsp; <a id="close"><u>Close this Message</u> <img src="/images/close_sm.png" alt="Close" border="0"></a>
</div>
<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>
</div>
<script type="text/javascript">
$("#eucookielaw").show();
SetCookie('eucookie','eucookie',365*10)
</script>

shoutwindow = window.open("<?=$MY_LINK_ROOT?>/shoutbox/minichat.php", "shoutwindow", "location=0,status=0,scrollbars=0,menubar=0,resizable=0  width=300,height=310");

session_start();

         //only for testing will remove this

    if(!shoutwindow.closed)  

      {  

         echo "window open";
               self.close(); 

           
           //shoutwindow.close ();  // also tried both these didnt work
           //  window.close();

      }  

      else  

      {  

         echo "Window already closed";           

      }  

 


mysql_close($link);
unset($_SESSION['Sess_UserId']);

// Unset all of the session variables.

session_unset();

// Finally, destroy the session.

session_destroy();

echo "<script> location.href='$MY_LINK_ROOT'</script>";

exit;

?>

the reason i use self.close is because i heard that it always closes the child not the parent.

<a href="logoff.php" onClick="self.close()" return:true;>Log Off</a>

the return true will make it execute the href as well right?

<img usemap="#map3" id="shapeimage_5" src="Notice2_files/shapeimage_5.png" style="border: none; height: 49px; left: -67px; position: absolute; top: -3px; width: 261px; z-index: 1; " alt="December 2011 notice" title="" /><map name="map3" id="map3"><area href="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" title="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" alt="https://docs.google.com/open?id=0BwxS6NVXBkCvMTZiMTc1MzYtNDA1Yi00YzRjLWFjNDktNGI5ZDVjYTJkNTkw" coords="67, 3, 258, 46" onclick="window.open(this.href); return false;" onkeypress="window.open(this.href); return false;" /></map>