Java script popup box

Question

Dear all below is code for my popup box what i want is to disable all the background of wordpress page and display this in exact center it is getting displayed but in v v odd way plz view my website www.kreativestudio.ca when some one clicks on the get a quote form the box popups

my popup form table

echo "<p class=\"Number\"><img src=\"http://www.kreativestudio.ca/wp-content/uploads/2013/05/call5.png\"> 647-896-7574 &nbsp;&nbsp;<a href=\"#\" onClick=\"pop('popup')\"><img src=\"http://www.kreativestudio.ca/wp-content/uploads/2013/05/getq.png\"></a></p>";

                echo "<table border=\"1\" id=\"popup\">";
                    echo "<tr>";
                        echo "<td>";
                            echo do_shortcode('[si-contact-form form="1"]');
                        echo "</td>";
                    echo "</tr>";
                    echo "<tr>";
                        echo "<td>";
                            echo "Click Close OR escape button to close it";
                            echo "<a href=\"#\" onClick=\"hide('popup')\">Close</a>";
                        echo "</td>";
                    echo "</tr>";
                echo "</table>";

my script

<script type="text/javascript">
function pop(div) {
    document.getElementById(div).style.display = 'block';
  }
function hide(div) {
   document.getElementById(div).style.display = 'none';
}
//To detect escape button
document.onkeydown = function(evt) {
evt = evt || window.event;
if (evt.keyCode == 27) {
hide('popDiv');
}
};
</script>

And my CSS

 #popup {
 display: none;
width: 300px;
height: 200px;
position: absolute;
color: #000000;
background-color: #ffffff;
/* To align popup window at the center of screen*/
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
}