jquery - 父级中的中心叠加

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

仍然需要找到一种方法来垂直居中于窗口和水平居中于父容器，但这目前可行。