窗口大小調整問題

Question

當我調整我的窗口彈出窗口停留在中心位置。它根據窗口大小顯示調整。我的代碼有什麼問題

.Popup 
     { 

      display: none; 
      height: 400px; 
      width: 400px; 
      position: fixed; 
      background-color: white; 
      z-index: 9999; 
     } 
    </style> 
    <script type="text/javascript"> 
     onload = function() { 
      var height = "innerHeight" in window 
       ? window.innerHeight 
       : document.documentElement.offsetHeight; 
      $('#popup').css({ 
       'margin-top': (height/2) - (200), 
       'margin-left': (document.body.offsetWidth/2) - (200) 
      }); 

      document.getElementById("popup").style.display = "inline"; 
     } 
    </script> 

Answer 1

如果您希望彈出窗口相對於窗口保持居中，則需要使用負邊距和基於百分比的定位。

此外，您的CSS引用了一個名爲.Popup的類和您的JavaScript ID爲#popup的ID。你可能想要整理一下。下面是一些示例CSS：

.Popup 
{ 
    display: block; 
    position: fixed; 
    height: 400px; 
    width: 400px; 
    top: 50%; 
    left: 50%; 
    margin-top: -200px; 
    margin-left: -200px; 
    background-color: white; 
    z-index: 9999; 
} 

請注意，邊距是相應尺寸的一半。 JavaScript是不必要的。

Answer 2

問題是您要爲高度和寬度設置不變的像素值。例如，如果我的瀏覽器窗口寬度爲1000像素，那麼您將margin-left設置爲300px。調整窗口大小時，此常數值將被保留。您可能反而想要使用百分比值並放棄javascript。例如，

#popup 
{ 
    display: none; 
    height: 400px; 
    width: 400px; 
    margin-top: 50% 
    margin-left: 50% 
    position: fixed; 
    background-color: white; 
    z-index: 9999; 
}