Question

您好我已成功在屏幕上弹出一个唯一的问题，就是它位于页面的中心而不是屏幕。

如何让它位于屏幕中央而不是以页面为中心？

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

enter image description here CSS / CSS POPUP的样式 /

    #blanket {
        background-color: #111;
        opacity: 0.60;
        *background: none;
        position: absolute;
        z-index: 9001;
        top: 0px;
        left: 0px;
        width: 100%;
    }

    #popUpDiv {
        position: absolute;
        background-color: #dddddd;
         opacity: 0.90;
        width: 400px;
        height: 300px;
        border: 5px solid #000;
        z-index: 9002;
        border: 2px solid #a1a1a1;
        border-radius: 10px;
        -webkit-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
        -moz-box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
        box-shadow: 1px 2px 21px 6px rgba(0,0,0,0.75);
    }      
</style>

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

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>

由于

Answer 1

#popUpDiv {
  position: fixed;

  width: 400px;
  height: 300px;

  left: 50%;
  top: 50%;

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

}

如果它有一个固定的宽度/高度，它应该居中。

示例：http://codepen.io/ryanjgill/pen/gbPZev

Answer 2

在伪代码中：div.style.top =（window.height - div.height）/ 2 + window.scrollTop

中心Javascript弹出到屏幕

2 个答案: