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

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

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

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

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

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

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

CSSについて

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

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

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

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