0

这是另一个带有扭曲的居中叠加问题。我需要在它的父容器中居中叠加。

并发症

  1. 如果容器比屏幕长（即垂直滚动条），我需要覆盖在屏幕中垂直居中并在父级中水平居中
  2. 如果包含适合屏幕（即没有垂直侧边栏），我需要在父容器中水平和垂直居中覆盖。

我目前在这两种情况下都将覆盖集中在屏幕上。

示例请看我的主页（试试下面两个服务的寻呼机）和服务列表（使用寻呼机）。

我当前用于屏幕居中的 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 才是理想的。

4

1 回答 1

0

使用 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-02T15:59:11.523 回答