JavaScriptでなるべくシンプルなモーダルを作りたい！

今さらですが、JavaScriptを基礎から勉強中の私です。

備忘録も兼ねて、自作したスクリプトの記録をつづっていこうと思います。

今回は「設定画面で一括操作をするためのモーダル」を作ってみました。ページ内に1つだけモーダルがあるシンプルなパターンです。

▼ モーダルのデモ

今回作るのはこんな感じの極々シンプルなモーダル。

以下のボタンを押すと、モーダルが表示されます。

基本のHTML構造

モーダルに必要なHTMLはこれだけです。

<button id="batchSetModalOpenBtn">モーダルを開く</button>

<div id="batchSetModal" >
  <div>
    モーダル内のコンテンツ
    <button id="batchSetModalCloseBtn">キャンセル</button>
  </div>
</div>

• モーダルを開くボタン（id="batchSetModalOpenBtn"）
• モーダル全体（id="batchSetModal"）
• モーダル内のキャンセルボタン（id="batchSetModalCloseBtn"）

開くボタン・モーダル本体・閉じるボタンの3点セットでOKです。

CSSは最小限でOK！

display: none と display: block を切り替えるだけなので、クラスをいくつも用意する必要はありません。

以下は、今回使った最低限のCSSです。

/* モーダル背景 */
#batchSetModal {
  display: none; /* これをJsで付け替える */
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

/* モーダル内容 */
#batchSetModal > div {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

JavaScriptもこれだけでOK！

ボタンのクリックで modal.style.display を切り替えるだけ。

const modal = document.getElementById('batchSetModal');
const openBtn = document.getElementById('batchSetModalOpenBtn');
const closeBtn = document.getElementById('batchSetModalCloseBtn');

openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
});

window.addEventListener('click', (e) => {
  // モーダルの外側（背景）をクリックしたら閉じる
  if (e.target === modal) {
    modal.style.display = 'none';
  }
});

これだけでも動きますが、別のスクリプトでエラーが出ていたことが原因でうまく動作しなかったことがありました。
それ以来、DOMContentLoaded を使ってHTMLが読み込まれてからスクリプトを実行するようにしています。
また、各要素の取得が失敗した場合にも備えて if() で囲むのが安心です。

document.addEventListener('DOMContentLoaded', () => {
  const modal = document.getElementById('batchSetModal');
  const openBtn = document.getElementById('batchSetModalOpenBtn');
  const closeBtn = document.getElementById('batchSetModalCloseBtn');

  if (openBtn) {
    openBtn.addEventListener('click', () => {
      modal.style.display = 'block';
    });
  }

  if (closeBtn) {
    closeBtn.addEventListener('click', () => {
      modal.style.display = 'none';
    });
  }

  window.addEventListener('click', (e) => {
    if (e.target === modal) {
      modal.style.display = 'none';
    }
  });
});

style.display か classList.add/remove か？

今回のように「1ページ内に1カ所だけ」「まずは動けばOK」というケースでは、style.display の直接操作がとてもシンプルでわかりやすいです。

一方で、classList.add / remove を使うと、CSSでアニメーションやフェードイン・フェードアウトなどの演出が可能になります。

まとめ

• 🖥 modal.style.display だけでもモーダルは簡単に作れる
• 🖥 見た目にこだわるなら classList を活用
• 🖥 まずは「動かすこと」をゴールにするのが大事！

「モーダルって難しそう」と感じていた方のハードルが、少しでも下がればうれしいです。

次回は、複数モーダルやアニメーション付きのパターンにも挑戦してみたいと思います。