RYX

Blog

Web制作 — 2026.02.05

【コピペで実装】初心者必見！モーダルウィンドウの実装方法

← ブログ一覧に戻る

はじめに

「ポップアップで情報を表示したいけど、実装方法がわからない…」
「アニメーションをつけたモーダルの作り方がわからない…」

そんな悩みを持つ方も多いのではないでしょうか？

この記事では、モーダルウィンドウの基本から実践的な実装方法まで、初心者にもわかりやすく解説します。
コピペするだけで実装できるコードも用意していますので、ぜひ最後までご覧ください。

見本

今回は下記のようなモーダルウィンドウを作っていきます。

「モーダルを開くボタン」を押してみてください！

ポイントは下記になります。

  • 開くボタンをクリックするとモーダルウィンドウが表示される
  • 背景がオーバーレイで暗くなる
  • ×ボタンまたは背景をクリックすると閉じる
  • スムーズなアニメーション効果付き

モーダルウィンドウの見た目の制作

HTML

<!-- モーダルウィンドウを開くボタン -->
<button class="modal-open js-modal-open">モーダルを開く</button>
<!-- モーダルウィンドウ -->
<div class="modal js-modal">
  <div class="modal-overlay js-modal-close"></div>
  <div class="modal-content">
    <div class="modal-content__inner">
      <h2 class="modal-content__title">モーダルタイトル</h2>
      <p class="modal-content__text">
        ここにモーダルの内容が入ります。
      </p>
      <button class="modal-close js-modal-close">×</button>
    </div>
  </div>
</div>

まずはHTMLですが、大きく分けて以下の2つの構造になっています。

  1. モーダルを開くボタン
  • modal-open: スタイリングのためのクラス
  • js-modal-open: JavaScriptで操作するためのクラス
  1. モーダルウィンドウの本体
  • modal: スタイリングのためのクラス
  • js-modal: JavaScriptで操作するためのクラス
  • modal-overlay: 背景を暗くするオーバーレイ部分
  • modal-content: モーダルの中身を表示する白い部分

CSS

/=========================================
#modal
=========================================/
.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    transition: opacity .3s, visibility .3s;
}


.modal.is-active {
    visibility: visible;
    opacity: 1;
}


/* オーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    cursor: pointer;
}


/* モーダルコンテンツ */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 90%;
    background-color: #fff;
    border-radius: 8px;
}


.modal-content__inner {
    padding: 30px;
    position: relative;
}


/* 閉じるボタン /
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
}

主要なポイントを以下に解説します。

  1. モーダル全体のスタイリング
  • visibility と opacity で表示/非表示を制御
  • position: fixed で画面全体に固定
  • transition でアニメーション効果を追加
  1. オーバーレイ部分
  • background-color: rgba() で半透明の黒背景
  • cursor: pointer でクリックできることを示す
  1. コンテンツ部分
  • position: absolute と transform で中央配置
  • max-width と widthで適切なサイズ設定

モーダルウィンドウの動きの制作

見た目が完成したので、次は動きをつけてモーダルの開閉ができるようにしていきます。

ポイントをおさらいすると以下のようになります。

  • 開くボタンをクリックするとモーダルが表示される
  • ×ボタンをクリックすると閉じる
  • オーバーレイ（背景）をクリックしても閉じる
  • スムーズなアニメーション効果がつく

JavaScriptの完成コード

/=========================================
#モーダルウィンドウ
=========================================*/
const modal = document.querySelector(".js-modal");
const modalOpen = document.querySelector(".js-modal-open");
const modalClose = document.querySelectorAll(".js-modal-close");


// モーダルを開く
modalOpen.addEventListener('click', () => {
  modal.classList.add('is-active');
});


// モーダルを閉じる
modalClose.forEach(closeButton => {
  closeButton.addEventListener('click', () => {
    modal.classList.remove('is-active');
  });
});

上記コードは、モーダルウィンドウの開閉を制御するためのものです。

主要な部分を解説します。

  1. 要素の取得
const modal = document.querySelector(".js-modal");
const modalOpen = document.querySelector(".js-modal-open");
const modalClose = document.querySelectorAll(".js-modal-close");

モーダル本体、開くボタン、閉じるボタン（複数）を取得します

  1. 開く処理
modalOpen.addEventListener('click', () => {
  modal.classList.add('is-active');
});

開くボタンがクリックされたときにis-activeクラスを追加

  1. 閉じる処理
modalClose.forEach(closeButton => {
  closeButton.addEventListener('click', () => {
    modal.classList.remove('is-active');
  });
});
  • 閉じるボタンと背景の両方に対してクリックイベントを設定
  • クリックされたときにis-activeクラスを削除

完成コード

以下は完成後のコードです：

HTML

<!-- モーダルを開くボタン -->
<button class="modal-open js-modal-open">モーダルを開く</button>


<!-- モーダルウィンドウ -->
<div class="modal js-modal">
  <div class="modal-overlay js-modal-close"></div>
  <div class="modal-content">
    <div class="modal-content__inner">
      <h2 class="modal-content__title">モーダルタイトル</h2>
      <p class="modal-content__text">
        ここにモーダルの内容が入ります。
      </p>
      <button class="modal-close js-modal-close">×</button>
    </div>
  </div>
</div>

CSS

/=========================================
#modal
=========================================/
.modal {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100vh;
    transition: opacity .3s, visibility .3s;
}


.modal.is-active {
    visibility: visible;
    opacity: 1;
}


/* オーバーレイ */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .6);
    cursor: pointer;
}


/* モーダルコンテンツ */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px;
    width: 90%;
    background-color: #fff;
    border-radius: 8px;
}


.modal-content__inner {
    padding: 30px;
    position: relative;
}


/* 閉じるボタン /
.modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 24px;
}

JavaScript

/=========================================
#モーダルウィンドウ
=========================================*/
const modal = document.querySelector(".js-modal");
const modalOpen = document.querySelector(".js-modal-open");
const modalClose = document.querySelectorAll(".js-modal-close");


modalOpen.addEventListener('click', () => {
  modal.classList.add('is-active');
});


modalClose.forEach(closeButton => {
  closeButton.addEventListener('click', () => {
    modal.classList.remove('is-active');
  });
});

まとめ

今回は簡単にモーダルウィンドウを作る方法を詳しく解説しました。

モーダルウィンドウは使う機会も非常に多いので、この記事をブックマークして、すぐに見返すことができるようにしておくと便利です。

Contact

Shopifyのご相談はこちら

構築・移行・改修・運用改善まで。状況を伺って最短ルートをご提案します。

相談・見積もり無料 / 24時間以内に返信

無料相談 ↗見積もり
← ブログ一覧に戻る
相談する