Javascript弹出框

Question

亲爱的以下是我的弹出框的代码我想要的是禁用wordpress页面的所有背景并在正确的中心显示它显示但是在vv奇怪的方式plz查看我的网站www.kreativestudio.ca当一些点击框弹出窗口中的获取报价

我的弹出窗体表

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>";

我的剧本

<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>

我的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;
}