【JavaScript・CSS】クリック時に数秒間だけ表示する要素を実装する例

今回は、Webサイトでボタンなどをクリックした際に、数秒間だけ表示する要素をJavaScriptとCSSでで実装する例となります

【JavaScript・CSS】クリック時に数秒間だけ表示する要素を実装する例

以下の例では、ボタンをクリックした際に、1秒間だけ指定した要素を表示し、要素内にはクリックしたボタン内のテキストを表示します。また、画面全体にオーバーレイを追加しています。

オーバレイの要素にはCSSのtransitionプロパティを指定して、ほわっとしたアニメーションで変化させます。

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

JavaScriptの簡単な説明

JavaScriptのコードの簡単な説明となります。

1秒間だけ要素を表示する関数

以下の関数は、1秒間だけ要素を表示する関数となります。

関数内では、まず、デフォルトで非表示としている要素に対して、classの値の変更して要素を表示しています。また、関数の引数はクリックしたボタン内のテキストとなり、そのテキストも表示する要素内に表示しています。

そして、setTimeoutメソッドで1秒後に、表示した要素のclassの値を変更して非表示にしています。

function alarm(msg) {
  const overlay = document.getElementById("overlay");
  const messageTxt = document.getElementById("message_txt");
    
  overlay.classList.toggle('overlay-on');
  messageTxt.textContent = msg + "がクリックされました";
  setTimeout(function() {
    overlay.classList.toggle('overlay-on');
  }, 1000);
}

要素内のテキストを変更する方法

要素内のテキストを変更する方法については、以下のリンク先を参考にしてみてください。

【JavaScript】要素にテキストやコンテンツを追加・変更・削除する方法

要素のclassの値を扱う方法

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

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

要素にクリックイベントを追加

以下の箇所では、上記の関数を実行するクリックイベントを、classの値にbuttonを持つ要素に対して追加してます。

また、クリックイベントで実行する関数の引数には、クリックしたボタン内のテキストを渡しています。

const button = document.getElementsByClassName("button");
for(let i = 0; i < button.length; i++) {
  button[i].addEventListener("click", function(){
    alarm(button[i].textContent);
  }, false);
}

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

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

CSSの簡単な説明

オーバレイの表示・非表示についてのCSSは以下のリンク先を参考にしてみてください。

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