0

これは、ひねりを加えたさらに別の中央オーバーレイの質問です。オーバーレイを親のコンテナの中央に配置する必要があります。

合併症

  1. コンテナーが画面よりも長い場合 (つまり、垂直スクロール バー)、オーバーレイを画面の垂直方向の中央に配置し、親の水平方向の中央に配置する必要があります。
  2. コンテナが画面に収まる場合 (つまり、垂直サイドバーがない場合)、オーバーレイを親コンテナの水平方向および垂直方向の中央に配置する必要があります。

現在、両方のシナリオでオーバーレイを画面の中央に配置しています。

例については、私のホームページ(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 に答える