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

【JavaScript・CSS】オーバーレイを実装する方法｜半透明の箇所を選択しても非表示に｜今回はJavaScript・CSSを利用し、指定したボタンをクリックすると、全画面を覆うオーバーレイを表示するシンプルで簡単な例となります。また、jQueryを利用したオーバレイを実装する方法については以下のリンク先を参考にしてみてください。https://blog-and-destroy.com/7519Java……

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

JavaScriptの簡単な説明

オーバーレイの表示・非表示 // オーバレイを開閉する関数 const overlay = document.getElementById('overlay'); function overlayToggle() < overlay.classList.toggle('overlay-on'); >// 指定した要素に対して上記関数を実行するクリックイベントを設定 const clickArea = document.getElementsByClassName('overlay-event'); for(let i = 0; i 要素のclassの値を扱う方法複数の要素にクリックイベントを追加する方法バブリングを停止 // イベントに対してバブリングを停止 function stopEvent(event) < event.stopPropagation(); >const overlayInner = document.getElementById('overlay-inner'); overlayInner.addEventListener('click', stopEvent, false);

CSSの簡単な説明

オーバーレイのCSS

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

#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 オーバレイ内の要素を上下・左右中央揃え .flex

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

【Android】おすすめ設定・使い方まとめ
【スマホ】おすすめアプリまとめ
NFC・おサイフケータイの設定方法
スマホで行動履歴を確認する方法

addEventListenerの利用例｜イベント発生時に関数を実行
JavaScriptでスマートリモコン「Nature Remo」を操作する例