【JavaScript・CSS】オーバーレイを実装する方法|半透明の箇所を選択しても非表示に

今回はJavaScript・CSSを利用し、指定したボタンをクリックすると、全画面を覆うオーバーレイを表示するシンプルで簡単な例となります。

また、jQueryを利用したオーバレイを実装する方法については以下のリンク先を参考にしてみてください。

JavaScript・CSSでオーバーレイを実装する例

以下、JavaScript・CSSを利用したオーバーレイの例となります。

例では、「Click」ボタンをクリックすると全画面を覆うオーバーレイが表示され、オーバーレイ内の「Close」ボタンをクリックすると非表示にします。また、オーバレイの要素にはCSSのtransitionプロパティを指定して、ほわっとしたアニメーションで変化させます。

オーバーレイのレイアウトは、中心にテキストを表示する箇所と、その外側に半透明の箇所があり、半透明の箇所を選択してもオーバーレイを非表示にします。

See the Pen KKaYZZq by yic666kr (@yic666kr) on CodePen.

JavaScriptについて

以下、JavaScriptのコードのポイントとなる箇所の説明となります。

オーバーレイの表示・非表示

次の箇所では、指定した要素(class="overlay-event"を持つ要素)をクリックすると、classの値を変更してオーバレイの表示・非表示を切り替えています。

	// オーバレイを開閉する関数
  const overlay = document.getElementById('overlay');
  function overlayToggle() {
    overlay.classList.toggle('overlay-on');
  }
  // 指定した要素に対して上記関数を実行するクリックイベントを設定
  const clickArea = document.getElementsByClassName('overlay-event');
  for(let i = 0; i < clickArea.length; i++) {
    clickArea[i].addEventListener('click', overlayToggle);
  }

指定した要素にクリックイベントを実装

指定したすべての要素に対してクリックイベントを適用させる方法の詳細は、以下のリンク先を参考にしてみてください。

バブリングを停止

DOMでは、ある要素にイベントが発生した場合、先祖要素に向かってイベントが伝わります。このことをバブリングといい、例えばクリックイベントを持つ要素をクリックした場合、その親要素にも同じクリックイベントが発生します。

このバブリングを停止するには、イベントを伝播させたくない要素のイベントに対して、イベントオブジェクトのstopPropagationメソッドを呼び出します。

次のJavaScriptの箇所では、オーバーレイ内のテキストを表示する要素(id="overlay-inner"を持つ要素)のクリックイベントに対して、stopPropagationメソッドでバブリングを停止しています。

  // イベントに対してバブリングを停止
  function stopEvent(event) {
    event.stopPropagation();
  }
  const overlayInner = document.getElementById('overlay-inner');
  overlayInner.addEventListener('click', stopEvent);

CSSについて

以下、CSSのコードのポイントとなる箇所の説明となります。

オーバーレイのCSS

以下の箇所はオーバレイの要素に対してのCSSとなり、idの値overlayをもつ要素に対してposition: fixed; などを指定しています。

その要素にJavaScriptを利用してclassの値overlay-onを付与することで、visibilityとopacityプロパティの値を変更して、オーバレイの表示・非表示を切り替えます。

また、transitionプロパティを指定して要素の変化をアニメーションとしています。

#overlay{
  position: fixed;
  top:0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  opacity: 0;
  background: rgba(0,0,0,0.6);
  transition: all 0.5s ease-out;
}
#overlay.overlay-on{
  visibility: visible;
  opacity: 1;
}

オーバレイ内の要素を上下・左右中央揃え

次の箇所では、オーバレイ内の要素を上下・左右中央揃えにするためにFlexbox(フレックスボックス)を利用しています。

.flex{
  width: 100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}

Flexboxでの上下・左右中央揃えの詳細やベンダープレフィックスを指定する例などは、以下のリンク先を参考にしてみてください。

参考サイトなど

コメント投稿コメント投稿欄を開く

コメントは、項目欄(*は必須項目)を入力し、「コメントを送信」ボタンをクリックしてください。 (メールアドレスは公開されることはありません。コメントの公開は承認制となります。)

Twitterで返信する場合はこちらから。