Javascript Java脚本弹出框

亲爱的，下面是我的弹出框的代码。我想要的是禁用wordpress页面的所有背景，并将其显示在确切的中心。它正在显示，但以奇怪的方式，请查看我的网站www.krativestudio.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>";

---

看看jQueryUI对话框。它正是你想要的，我正在看它，它需要一些css，然后你是说一个覆盖？

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

 #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;
}