Java Scriptの基本その11　モーダルウィンドウ

イントロダクション

この記事では、JavaScriptを使ったモーダルウィンドウの表示と非表示の基本的な実装方法について解説します。モーダルウィンドウは、ウェブページ上で重要なメッセージを表示したり、ユーザーからの入力を求める際によく使われる便利な要素です。今回は、HTML要素の選択、イベントリスナーの設定、クラスの操作を中心に、優しく丁寧に説明していきます。

HTML要素の選択と定義

まずは、HTML要素をJavaScriptで選択し、定数として定義する方法を説明します。この手順は、後でこれらの要素を操作するための準備です。

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const btnCloseModal = document.querySelector(".close-modal");
const btnsOpenModal = document.querySelectorAll(".show-modal");

• modal: クラス名「modal」の要素を取得します。この要素は、モーダルウィンドウそのものを指します。

• overlay: クラス名「overlay」の要素を取得します。この要素は、モーダルウィンドウの背後に表示されるオーバーレイ（薄暗い背景）を指します。

• btnCloseModal: クラス名「close-modal」の要素を取得します。この要素は、モーダルウィンドウを閉じるためのボタンです。

• btnsOpenModal: クラス名「show-modal」の要素をすべて取得します。この要素は、モーダルウィンドウを開くための複数のボタンを指します。

これらの定数を使って、モーダルウィンドウの表示と非表示を制御します。

モーダルウィンドウの表示と非表示の関数

次に、モーダルウィンドウを表示および非表示にするための関数を定義します。このステップでは、クラスの操作を通じて要素の表示状態を制御します。

const openModal = function () {
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
};

const closeModal = function () {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

• openModal関数: モーダルウィンドウとオーバーレイから「hidden」クラスを削除し、これらの要素を表示します。

• closeModal関数: モーダルウィンドウとオーバーレイに「hidden」クラスを追加し、これらの要素を非表示にします。

このように、クラスの追加と削除によって、要素の表示・非表示を簡単に制御できます。

モーダルウィンドウの表示トリガー設定

次に、どのモーダルウィンドウを開くのかを指定するために、イベントリスナーを設定します。これにより、特定のボタンをクリックしたときにモーダルウィンドウが表示されるようにします。

for (let i = 0; i < btnsOpenModal.length; i++)
  btnsOpenModal[i].addEventListener("click", openModal);

• forループ: すべてのbtnsOpenModal要素に対して、クリックイベントが発生した際にopenModal関数を呼び出すイベントリスナーを追加します。

これにより、どのボタンをクリックしてもモーダルウィンドウが開くようになります。

モーダルウィンドウの非表示トリガー設定

最後に、モーダルウィンドウを閉じるためのイベントリスナーを設定します。これにより、閉じるボタンやオーバーレイをクリックしたときにモーダルウィンドウが閉じられます。

btnCloseModal.addEventListener("click", closeModal);
overlay.addEventListener("click", closeModal);

• btnCloseModal: 閉じるボタンをクリックするとcloseModal関数を呼び出します。

• overlay: オーバーレイをクリックするとcloseModal関数を呼び出します。

この設定により、ユーザーがモーダルウィンドウを簡単に閉じることができます。

キーボードイベントによる非表示設定

さらに、エスケープキーを押したときにもモーダルウィンドウを閉じる設定を追加します。

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape") {
    if (!modal.classList.contains("hidden")) {
      closeModal();
    }
  }
});

• document.addEventListener: キーボードの「Escape」キーが押されたときにcloseModal関数を呼び出します。

• e.key === "Escape": キーイベントが「Escape」キーかどうかを確認します。

• !modal.classList.contains("hidden"): モーダルウィンドウが表示されているかどうかを確認します。

この設定により、エスケープキーを押すことでモーダルウィンドウを簡単に閉じることができます。

まとめ

この記事では、モーダルウィンドウの表示と非表示を管理するJavaScriptコードの基本的な構造について解説しました。HTML要素の選択、イベントリスナーの設定、クラスの操作を通じて、モーダルウィンドウの動的な動作を実現しました。この知識を活用して、ウェブアプリケーションのユーザーインターフェースをより直感的で使いやすくすることができます。次回は、さらに高度なモーダルウィンドウの機能について学びましょう。

Githubでも公開してるよ！

先ほどのコードはGithubで公開しているよ。
ここ見てね！