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

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

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

【jQuery・CSS】オーバレイを実装する方法｜半透明の箇所をクリックしても非表示に

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, false);
  }

要素のclassの値を扱う方法

要素のclassの値を扱う方法については、以下のリンク先を参考にしてみてください。

【JavaScript】classの値を取得・追加・削除・変更など｜classListでCSSのclassを扱う

複数の要素にクリックイベントを追加する方法

複数の要素に対してクリックイベントを追加する方法については、以下のリンク先を参考にしてみてください。

【JavaScript】クリックイベントを複数の要素に適用させる例｜同じclassを持つ要素など

バブリングを停止

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

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

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

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

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;
}

width・heightの値に指定したvw・vh の単位については、以下のリンク先を参考にしてみてください。

【CSS】高さ・横幅のサイズを画面全体にする簡単な方法｜vw・vh

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

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

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

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

【CSS】上下・左右の中央揃えを簡単に実装する方法｜Flexboxの利用例