家长中心覆盖

2012-08-02 63 views 0 likes

这是另一个中心覆盖问题与扭曲。我需要在其父容器中放置一个叠加层。家长中心覆盖

并发症

如果容器是长于屏幕（即垂直滚动条），我需要垂直居中在屏幕和水平在父居中
如果包含在屏幕拟合覆盖（即没有垂直侧边栏），我需要在父容器中水平和垂直居中叠加。

我目前在两种情况下都有覆盖居中的屏幕。

请参阅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只会是理想的。

谢谢！

马特

来源

2012-08-02 waterloomatt

回答

使用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(); 
}

还是需要找到一种方法来进行垂直中心窗口和水平中心父容器，但这个工程现在。

干杯

来源

2012-08-02 15:59:11 waterloomatt

家长中心覆盖

回答

相关问题