component-overlay

echo-overlay

特定条件で表示状態となる、画面全体を覆うコンポーネントを表示する。
画面全体を覆っている .echo-overlay-bg と、内容を含む .echo-overlay-contents の二重構造となっている。

使用する際は、JavaScript等で「なんらかのトリガーで表示し、かつbody要素のスクロールを禁止する処理」を行う必要がある。

z-index1000 となっている。常に表示する要素は、レイヤーを 1001 以上にすること。

<div class="echo-overlay">
    <div class="echo-overlay-bg"></div>
    <div class="echo-overlay-contents">
        (contents)
    </div><!-- /.echo-overlay-contents -->
</div><!-- /.echo-overlay -->

sub class echo-overlay-inverse

文字色と背景色が反転する。

<div class="echo-overlay echo-overlay-inverse">
    <div class="echo-overlay-bg"></div>
    <div class="echo-overlay-contents">
        (contents)
    </div><!-- /.echo-overlay-contents -->
</div><!-- /.echo-overlay -->