中心Javascript弹出到屏幕

嗨，我已经成功地在屏幕上弹出了一个窗口，唯一的问题是它在页面的中心，而不是屏幕

如何使其位于屏幕中心而不是页面中心

我在双屏幕上，但在单一视图中查看页面

CSS /CSS弹出窗口的样式/

#毛毯{
背景色：#111；
不透明度：0.60；
*背景：无；
位置：绝对位置；
z指数：9001；
顶部：0px；
左：0px；
宽度：100%；
}
#爆米花{
位置：绝对位置；
背景色：#dddddd；
不透明度：0.90；
宽度：400px；
高度：300px；
边框：5px实心#000；
z指数：9002；
边框：2px实心#A1A1；
边界半径：10px；
-网络工具包盒阴影：1px21x21px6pxRGBA（0,0,0,0.75）；
-莫兹盒阴影：1px21x21px6pxRGBA（0,0,0,0.75）；
盒影：1px21x21px6pxRGBA（0,0,0,0.75）；
}      

Javascript

 <script>
     function toggle(div_id) {
         var el = document.getElementById(div_id);
         if (el.style.display == 'none') { el.style.display = 'block'; }
         else { el.style.display = 'none'; }
     }
     function blanket_size(popUpDivVar) {
         if (typeof window.innerWidth != 'undefined') {
             viewportheight = window.innerHeight;
         } else {
             viewportheight = document.documentElement.clientHeight;
         }
         if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
             blanket_height = viewportheight;
         } else {
             if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                 blanket_height = document.body.parentNode.clientHeight;
             } else {
                 blanket_height = document.body.parentNode.scrollHeight;
             }
         }
         var blanket = document.getElementById('blanket');
         blanket.style.height = blanket_height + 'px';
         var popUpDiv = document.getElementById(popUpDivVar);
         popUpDiv_height = blanket_height / 2 - 200;//200 is half popup's height
         popUpDiv.style.top = popUpDiv_height + 'px';
     }
     function window_pos(popUpDivVar) {
         if (typeof window.innerWidth != 'undefined') {
             viewportwidth = window.innerHeight;
         } else {
             viewportwidth = document.documentElement.clientHeight;
         }
         if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
             window_width = viewportwidth;
         } else {
             if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                 window_width = document.body.parentNode.clientWidth;
             } else {
                 window_width = document.body.parentNode.scrollWidth;
             }
         }
         var popUpDiv = document.getElementById(popUpDivVar);
         window_width = window_width / 2 - 200;//200 is half popup's width
         popUpDiv.style.left = window_width + 'px';
     }
     function popup(windowname) {
         blanket_size(windowname);
         window_pos(windowname);
         toggle('blanket');
         toggle(windowname);
     }

</script>

功能切换（div_id）{
var el=document.getElementById（div_id）；
如果（el.style.display='none'）{el.style.display='block'；}
else{el.style.display='none'；}
}
函数大小（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口高度=window.innerHeight；
}否则{
视口高度=document.documentElement.clientHeight；
}
if（（viewportheight>document.body.parentNode.scrollHeight）和&（viewportheight>document.body.parentNode.clientHeight））{
毛毯高度=视口高度；
}否则{
if（document.body.parentNode.clientHeight>document.body.parentNode.scrollHeight）{
毯子高度=document.body.parentNode.clientHeight；
}否则{
毯子高度=document.body.parentNode.scrollHeight；
}
}
var blanket=document.getElementById（'blanket'）；
毛毯.style.height=毛毯_高度+px'；
var popUpDiv=document.getElementById（popupdivar）；
popUpDiv_高度=毯子_高度/2-200；//200是弹出窗口高度的一半
popUpDiv.style.top=popUpDiv_高度+'px'；
}
功能窗口位置（popUpDivVar）{
if（typeof window.innerWidth！=“未定义”）{
视口宽度=window.innerHeight；
}否则{
viewportwidth=document.documentElement.clientHeight；
}
if（（viewportwidth>document.body.parentNode.scrollWidth）和&（viewportwidth>document.body.parentNode.clientWidth））{
窗口宽度=视口宽度；
}否则{
if（document.body.parentNode.clientWidth>document.body.parentNode.scrollWidth）{
窗口宽度=document.body.parentNode.clientWidth；
}否则{
窗口宽度=document.body.parentNode.scrollWidth；
}
}
var popUpDiv=document.getElementById（popupdivar）；
窗口宽度=窗口宽度/2-200；//200是弹出窗口宽度的一半
popUpDiv.style.left=窗口宽度+'px'；
}
功能弹出窗口（windowname）{
毛毯尺寸（窗口名称）；
窗口位置（窗口名称）；
开关（“毯子”）；
切换（窗口名）；
}

HTML的一部分

   <div id="popUpDiv" style="display: none;">
                    <div style="float: right; text-align: right;">
                        <div id="Close" style="margin: 5px 5px 0 auto; z-index: 9003!important;">
                            <asp:ImageButton ID="ImageButton1" ImageUrl="~/EmailClient/Trash.png" Width="20px" Height="20px" runat="server" />
                        </div>


                        <center><p style="color:black;z-index: 9003!important; font-size: x-large;"> <b>Price Change</b> </center>
                        <table class="auto-style1000 table_1" style="z-index: 9003!important;">
                            <tr>
                                <td class="auto-style4000">Item:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox6" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Unit Price:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox7" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">List Price:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox8" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Markup:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox9" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style4000">Margin:</td>
                                <td style="text-align: left !important;">
                                    <asp:TextBox ID="TextBox10" runat="server" Width="150px"></asp:TextBox>
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                            <tr>
                                <td class="auto-style3000">&nbsp;</td>
                                <td style="text-align: left !important;">
                                    <asp:Button ID="Button3" CssClass="button_1 green" runat="server" Text="Save" Width="104px" />
                                </td>
                                <td>&nbsp;</td>
                            </tr>
                        </table>
                    </div>

                </div>
                <a href="#" onclick="popup('popUpDiv')">Click to Open CSS Pop Up</a>
                <!-- / POPUP-->


                <!-- end #mainContent -->

            </div>

---

感谢使用伪代码：div.style.top=（window.height-div.height）/2+window.scrollTop

#popUpDiv {
  position: fixed;

  width: 400px;
  height: 300px;

  left: 50%;
  top: 50%;

  margin-top: -150px;
  margin-left: -200px;

}

如果是固定宽度/高度，则应将其居中

---

示例：

根据您的问题，我只能假设您的div具有css绝对位置。如果是这种情况，请尝试将位置更改为固定（

popUpDiv.style.position='fixed'

）.修好了整个房间dissapear@TJ我在问题中添加了更多的代码，你能更具体一点吗？我也这么做了，把div放在页面底部不好我贴了一张问题的图片，你可以将div模式编码到左边多一点。我没有将其向上移动，但不确定更改数字是否有帮助，因为我可以在页面上向下滚动。您是否确保将位置从绝对更改为固定？是的，我确实进行了更改。我修改了我的示例，使身体非常高。即使在滚动时，div仍保持居中。你能提供一个小提琴或其他一些问题的工作例子吗？这段代码把它抛了出去：页边顶部：-150px；左边距：-200px；但是没有它它也行谢谢你

#popUpDiv {
  position: fixed;

  width: 400px;
  height: 300px;

  left: 50%;
  top: 50%;

  margin-top: -150px;
  margin-left: -200px;

}