モーダルウィンドウ実装解説｜Modal Window CSS & JS Guide

2026年4月6日

モーダルウィンドウデザイン見本

ボタンクリックで画面中央にオーバーレイ表示するモーダルウィンドウの実装解説。瞬時切り替えとフェードアニメーションの2パターンのコピペ用コードを掲載。

① 基本の開閉 — display プロパティで瞬時に切り替え

ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト

HTML

<div id="modal-btn-container">
  <button id="modal-btn">モーダルウィンドウ表示</button>
</div>
<div id="mask"></div>
<div id="modal">
  <p>ダミーテキスト／ダミーテキスト／ダミーテキスト</p>
  <div id="close-btn-container">
    <button id="close-btn">閉じる</button>
  </div>
</div>

CSS

#modal-btn-container {
  display: flex;
  justify-content: center;
}

#modal-btn {
  width: 80%;
  max-width: 240px;
  height: 48px;
  border-radius: 8px;
  background-color: skyblue;
  border: none;
  color: white;
  cursor: pointer;
}

#modal-btn:hover {
  opacity: 0.7;
}

#mask {
  display: none;
}

#mask.appear {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
}

#modal {
  display: none;
}

#modal.appear {
  display: block;
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

@media (max-width: 768px) {
  #modal.appear {
    width: 75%;
  }
}

#close-btn-container {
  display: flex;
  justify-content: flex-end;
}

#close-btn {
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

var mask = document.querySelector('#mask');
var modal = document.querySelector('#modal');
var modalBtn = document.querySelector('#modal-btn');
var closeBtn = document.querySelector('#close-btn');

modalBtn.addEventListener('click', function() {
  mask.classList.add('appear');
  modal.classList.add('appear');
});

mask.addEventListener('click', function() {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});

closeBtn.addEventListener('click', function() {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});

classList + display: none によるオン／オフ

#mask と #modal に display: none を指定しておき、.appear クラスが付いた時だけ display: block にします。マスク（半透明背景）は position: fixed で画面全体を覆い、モーダル本体は top: 50%; left: 50%; transform: translate(-50%, -50%); の組み合わせで画面中央に配置します。マスク要素にも click イベントを設定することで、背景クリックでも閉じられるようにしています。

② フェードイン — @keyframes で滑らかに表示

ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト／ダミーテキスト

HTML

<div id="modal-btn-container">
  <button id="modal-btn">モーダルウィンドウ表示</button>
</div>
<div id="mask"></div>
<div id="modal">
  <p>ダミーテキスト／ダミーテキスト／ダミーテキスト</p>
  <div id="close-btn-container">
    <button id="close-btn">閉じる</button>
  </div>
</div>

CSS

#modal-btn-container {
  display: flex;
  justify-content: center;
}

#modal-btn {
  width: 80%;
  max-width: 240px;
  height: 48px;
  border-radius: 8px;
  background-color: skyblue;
  border: none;
  color: white;
  cursor: pointer;
}

#modal-btn:hover {
  opacity: 0.7;
}

#mask {
  display: none;
}

#mask.appear {
  display: block;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 1;
  animation: fadeIn 0.5s ease-out;
}

#modal {
  display: none;
}

#modal.appear {
  display: block;
  background: #fff;
  width: 50%;
  padding: 24px;
  border-radius: 4px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: fadeIn 0.5s ease-out;
}

@media (max-width: 768px) {
  #modal.appear {
    width: 75%;
  }
}

#close-btn-container {
  display: flex;
  justify-content: flex-end;
}

#close-btn {
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

var mask = document.querySelector('#mask');
var modal = document.querySelector('#modal');
var modalBtn = document.querySelector('#modal-btn');
var closeBtn = document.querySelector('#close-btn');

modalBtn.addEventListener('click', function() {
  mask.classList.add('appear');
  modal.classList.add('appear');
});

mask.addEventListener('click', function() {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});

closeBtn.addEventListener('click', function() {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});

@keyframes によるフェードアニメーション

@keyframes に名前（fadeIn）を付けて opacity の変化を定義し、.appear クラスが付いた際の display: block と同時に animation プロパティを適用します。from が表示前（opacity: 0）、to が表示後（opacity: 1）の状態です。マスクとモーダル本体の両方に同じアニメーションを設定することで、全体が自然にフワッと現れます。

モーダルウィンドウ応用編

③ お知らせ表示 — クリックした項目に合わせて内容を切り替え

お知らせ 1

お知らせ1の内容です。クリックした項目に対応したコンテンツをモーダルに表示できます。

お知らせ 2

お知らせ2の内容です。タブメニューのようなUIをモーダルと組み合わせて実現できます。

お知らせ 3

お知らせ3の内容です。1つのモーダルで複数の内容を使い分けられます。

1つのモーダルに複数のコンテンツを用意する

クリックした項目の番号をJavaScriptで判定し、対応するコンテンツブロックだけを表示します。コンテンツは最初からHTMLに書いておき、display: none / display: block で切り替えるのがシンプルです。タブメニューのようなUIをモーダルと組み合わせて実現できます。

› 実装方法はこちらのページで掲載中

④ 拡大表示 — サムネイルをクリックして画像を拡大

クリックしたサムネイルを拡大表示する

各サムネイルに固有の識別子を持たせ、クリック時にそれに対応する大きな画像ブロックだけを表示します。実際の画像では img タグの src を書き換える方法も使えます。マスクをクリックすれば閉じる動作も同様に実装できます。