家長中心覆蓋

Question

這是另一箇中心覆蓋問題與扭曲。我需要在其父容器中放置一個疊加層。

併發症

1. 如果容器是長於屏幕（即垂直滾動條），我需要垂直居中在屏幕和水平在父居中
2. 如果包含在屏幕擬合覆蓋（即沒有垂直側邊欄），我需要在父容器中水平和垂直居中疊加。

我目前在兩種情況下都有覆蓋居中的屏幕。

請參閱my homepage（嘗試下面兩種服務的尋呼機）和service list（使用尋呼機）的例子。

我對屏幕居中當前CSS是

.overlay { 
    display: none; 
    padding: 20px 0; 
    text-align: center; 
    vertical-align: middle; 
    background: #E9F7FF; 
    border: 3px solid #97D1F4; 
    font-size: 1.5em; 
    color: #97D1F4; 
    font-weight: bold; 
    width: 300px; 
    height: 20px; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -10px; 
    margin-left: -150px; 
} 

是的，我可以使用jQuery這個工作。但CSS只會是理想的。

謝謝！

馬特

Answer 1

使用jQuery UI來解決 - 實際上很簡單。

function isScrolledIntoView(elem) 
{ 
    var docViewTop = $(window).scrollTop(); 
    var docViewBottom = docViewTop + $(window).height(); 

    var elemTop = $(elem).offset().top; 
    var elemBottom = elemTop + $(elem).height(); 

    return ((docViewTop < elemTop) && (docViewBottom > elemBottom)); 
} 

if (isScrolledIntoView(container)) 
     { 
      $(overlay).position({ 
       my: "center", 
       at: "center", 
       of: $(container) 
      }); 
     } 
     else 
     { 
      $(overlay).position({ 
       my: "center", 
       at: "center", 
       of: window 
      }); 
     } 

     $(overlay).show(); 
} 

還是需要找到一種方法來進行垂直中心窗口和水平中心父容器，但這個工程現在。

乾杯