オーバーレイ(黒の背景)の表示

オーバーレイ(黒の背景)を表示させる方法を見ていきます。まずは、ボタンを押すとオーバーレイを表示させるだけの基本から。動くサンプルはこちら。

JS側は、ID showBtnボタンがクリックされると、ID overlayをフェードアウトしながら表示させるシンプルなものです。CSS側では、overlayの装飾をしています。初期状態では、display: none; に設定しています。positionは、fixed;になります。z-indexも他の要素より大きな値にします(もちろん、オーバーレイの上に表示させたい要素がある場合は、そちら側をより大きな値に)。最後の3つでは、不透明度を設定しています。以上が基本です。たまに、position: fixed; ではなく、position: absolute; のものを見かけますが、スクロールバーが表示される状態だと、少し都合が悪いです。スクロールして新たに表示された部分が、黒背景になりません。(→実例サンプル)

表示したら当然、消したくもなります。ここでは、表示させたオーバーレイをクリックすると、フェードアウトして消えるようにします。また上記では、HTML上に、<div id="overlay"></div>と埋め込みましたが、これはJS側でやることにしましょう。以下になります。動くサンプルはこちら。

動的に、<div id="overlay"></div>を生成して、bodyにappendToしています。それをfadeIn()させたり、またクリックされたら、fadeOutさせています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です