JavaScriptで実装するモーダルウィンドウ【初級編⑦】

はじめに

今回は、クリックしたら表示されるモーダルウィンドウを作っていきます。

全体のコード解説

See the Pen JavaScriptで実装するモーダルウィンドウ by Uka Suzuki (@uukasuzuki_) on CodePen.

HTML5のコード解説

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>タイトル</h2>
    <p>ここにコンテンツを表示します。</p>
  </div>
</div>

• id="myModal"このIDを使ってJavaScriptでモーダルを操作し、開閉の制御を行います。

• class="modal"このクラスはCSSでスタイリングするためのもので、モーダルウィンドウを表示・非表示にする際のスタイル設定（例：display: none;で非表示）が含まれます。

• ×これはモーダルを閉じるための「×」ボタンです。

• class="close"このクラスでスタイルを定義し、位置や見た目を制御します。&timesはHTMLで「×」の記号を表す特殊文字コードです。このボタンをクリックするとモーダルが閉じるようにJavaScriptで動作を定義します。

CSS3のコード解説

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* 背景を暗くする */
}

• display: none;:は、モーダルウィンドウを初期状態で非表示にします。JavaScriptでボタンをクリックした時に、この値を block に変更して表示します。

• z-index: 1;:は、モーダルウィンドウが他の要素より前面に表示されるように指定しています。z-indexが大きいほど前に表示されます。left: 0;とtop: 0;:は、モーダルの左上の位置を画面の左上に固定します。

• background-color: rgba(0, 0, 0, 0.4);: モーダルウィンドウの背景を半透明の黒にし、画面全体を少し暗くしてモーダルが際立つようにします。rgba(0, 0, 0, 0.4) の意味は「黒 (RGB = 0, 0, 0) に透明度40%」です。

.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

• box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);:は、モーダルに影をつけ、浮いているような効果を出します。0 5px 15px は影の位置とぼかしの大きさを指定し、rgba(0, 0, 0, 0.3) で影の色と透明度を設定しています。

• position: relative;:は、閉じるボタンをモーダル内で相対的に配置するために使います。

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
}

• position: absolute;:は、閉じるボタンをモーダルコンテンツの中で絶対的に配置します。このため、モーダル内の他の要素に影響されずに配置されます。

• top: 10px; と right: 15px;:は、閉じるボタンがモーダルの右上に表示されるように設定します。

JavaScriptのコード解説

const modal = document.getElementById("myModal");
const btn = document.getElementById("openModal");
const span = document.getElementsByClassName("close")[0];

• const modal = document.getElementById("myModal");モーダルウィンドウ全体を操作するために、HTMLの要素
  を取得しています。この変数modalを使ってモーダルを表示・非表示にします。
  

  • const btn = document.getElementById("openModal");モーダルを開くボタン を取得しています。ボタンがクリックされたときにモーダルが表示されるように設定します。

  
  

  • const span = document.getElementsByClassName("close")[0];閉じるための「×」ボタン を取得しています。getElementsByClassName は同じクラス名の要素が複数あった場合に全てを配列のように取得しますが、この場合、[0] で最初の要素（「×」ボタン）を指定しています。

  btn.onclick = function () {
    modal.style.display = "block";
  };
  

  • btn.onclick: ボタンがクリックされたときに実行される関数を定義しています。

  
  

  • modal.style.display = "block";:はクリックされた時に、モーダルウィンドウのdisplayプロパティを "block" に設定して、モーダルを表示します。CSSで display: none; として非表示にしていたモーダルを、このコードで再び表示することができます。

  span.onclick = function () {
    modal.style.display = "none";
  };
  

  • span.onclick: 閉じるボタン（「×」）がクリックされたときに実行される関数を定義しています。

  
  

  • modal.style.display = "none";:はモーダルのdisplayプロパティを "none" に設定して、モーダルウィンドウを非表示にします。これにより、閉じるボタンをクリックするとモーダルが消えます。

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  };
  

  • window.onclick: ウィンドウ全体をクリックしたときに実行される関数を定義しています。この関数では、クリックされた場所がモーダルウィンドウの外（モーダルの背景部分）であるかどうかをチェックします。

  
  

  • event.targetは、クリックされた要素を指します。event.target == modalという条件で、クリックされた場所がモーダルウィンドウそのものであれば、モーダルを閉じるように設定しています。

  
  

  • modal.style.display = "none";:では、もしモーダルの外側がクリックされた場合、モーダルを非表示にします。

  まとめ

  今回で初級編は最後となります。次回からは、中級編としてお問い合わせフォームを制作していきます。