c-overlay
特定条件で表示状態となる、画面全体を覆うコンポーネントを表示する。
画面全体を覆っている .c-overlay-bg
と、内容を含む .c-overlay-contents
の二重構造となっている。
使用する際は、JavaScript等で「なんらかのトリガーで表示し、かつbody要素のスクロールを禁止する処理」を行う必要がある。
z-index
は 1000
となっている。常に表示する要素は、レイヤーを 1001
以上にすること。
<div class="c-overlay">
<div class="c-overlay-bg"></div>
<div class="c-overlay-contents">
(contents)
</div><!-- /.c-overlay-contents -->
</div><!-- /.c-overlay -->
c-overlay-inverse
文字色と背景色が反転する。
<div class="c-overlay c-overlay-inverse">
<div class="c-overlay-bg"></div>
<div class="c-overlay-contents">
(contents)
</div><!-- /.c-overlay-contents -->
</div><!-- /.c-overlay -->