【JavaScript&CSS】モーダルウィンドウの作り方

2024年2月1日

ボタンクリックで、画面中央にフワッと別ウィンドウを表示させる方法（モーダルウィンドウの作り方）について、HTML / CSS / JavaScriptコードを公開します。

アラートやアコーディオン、ポップアップメッセージなど

【JavaScript&CSS】ボタンを押したらメッセージを表示する方法4選以下のような、ボタンクリック(タップ)でメッセージを表示する方法を紹介します。アラートボタン１ OKボタン付きのダイアログボックスを表示。実装方法はこちらアコ…

HTML / CSS / JavaScript コード

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;
}

#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;
}

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

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

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

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

JavaScript コード

const mask = document.querySelector('#mask');
const modal = document.querySelector('#modal');
const modalBtn = document.querySelector("#modal-btn");
const closeBtn = document.querySelector("#close-btn");
       
modalBtn.addEventListener('click', () => {
  mask.classList.add('appear');
  modal.classList.add('appear');
});
        
mask.addEventListener('click', () => {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});
    
closeBtn.addEventListener('click', () => {
  mask.classList.remove('appear');
  modal.classList.remove('appear');
});

詳解 ①（フレックスボックスでボタン要素を左右中央／右端に配置）

通常左端に配置されるbutton 要素を、左右中央や右端に配置するには、主に以下2つの方法があります。

フレックスボックスを使用する方法
親要素にtext-align: center;、ボタン要素をブロック要素に変更（display: inline-block;）する方法

本記事ではフレックスボックスを使い、justify-content: center;およびjustify-content: flex-end;を合わせて設定することで、モーダルウィンドウを表示するボタンや閉じるボタンの位置を調整しています。

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

  #close-btn-container {
    display: flex;
    justify-content: flex-end;
  }
</style>

<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】各種ブロックやボタン、チェックボックスなどのレイアウトを操作する（フレックスボックス） HTML要素の配置に便利なdisplay: flex;の基本的な使い方をまとめました。レイアウトを考えるうえで必ず利用したい機能ですが、プロパティの種類が多く混乱しがち。本記…

詳解 ②（Positionプロパティで別ウィンドウとマスクを固定配置）

他の要素を無視して、特定の要素を画面上の特定の位置に配置するには、CSSのpositionプロパティを使用します。本記事では、

半透明のマスクを画面全体を覆うように
モーダルウィンドウを画面中央配置に

配置しています。

画面全体を覆う半透明のマスク

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

要素にposition: fixed;を設定したうえで、top: 0; bottom: 0; right: 0; left: 0;と位置を指定することで、要素のサイズが親要素（この場合はbody要素）のサイズに合わせて自動調整されます。

モーダルウィンドウを画面中央配置

#modal {
  background: #fff;
  width: 50%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  z-index: 2;
}

画面中央配置はtop: 50%; left: 50%;に加え、transform: translate(-50%, -50%);を設定します。
（top: 50%; left: 50%;では、要素の左上が画面中央に配置されるため、そこから要素の幅・高さの半分を戻す必要があります。）

詳解 ③（CSSアニメーションでフワッと表示）

本記事のように、モーダルウィンドウをフワッとゆっくり表示するには、CSSプロパティの@keyframesを使います。

#mask.appear {
  animation: fadeIn 0.5s ease-out;
}
    
#modal.appear {
  animation: fadeIn 0.5s ease-out;
}

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

このように記述することで、マスク要素とモーダル要素にappearクラスが付いたとき、@keyframesで設定したアニメーション（透明度が0から1になる）が0.5秒かけて適用されるようになります。

@keyframesについて

以下のように記述することで、特定の要素に多様なアニメーションがつけられます。

div {
  animation: 1s xxx;
}

@keyframes xxx {   /* xxxは好きな名前でOK */
  0% {
    /* 変化前の状態 */
  }
  50% {
    /* 変化中の状態。%の値は自由に決められ、複数用意してもOK。 */
  }
  100% {
    /* 変化後の状態 */
  }
}

上の例のように、@keyframeで変化の内容を記述し、変化をつけたいスタイルにアニメーション名と変化時間を記載します。これでdiv要素には、@keyframesに設定したアニメーションが1秒かけて実装されます。

シンプルなアニメーションについてはこちら

マウスホバーやボタンクリック（タップ）に反応するような、シンプルなアニメーションには「transform」や「transition」を使います。以下のような実装に向いています。

詳解 ④（PC／スマホでウィンドウ幅を変更）

本記事では、表示するデバイス（ウィンドウ幅）に応じてモーダルウィンドウの幅を調節しています。

ウィンドウ幅に応じてレイアウトや要素サイズなどを変更するには、CSSのメディアクエリ@mediaを使用します。

#modal.appear {
  width: 50%;
}

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

このように記述することで、以下のようにモーダルウィンドウの幅が自動調整されます。

PCのような広い画面（ウィンドウ幅：768px超）→ モーダルウィンドウの幅をウィンドウの半分（width: 50%;）に
PCのような広い画面（ウィンドウ幅：768px以下）→ モーダルウィンドウの幅をウィンドウの3/4（width: 75%;）に

メディアクエリの詳細はこちら

【CSS】画面サイズに応じて表示を変える方法（メディアクエリ） @media (min-width: ){}を用いたレスポンシブデザインのコードを紹介します。スマホ・タブレット・PCの3つを想定し、それぞれで表示される内容やレイアウトを変えられま…

【応用】画像を拡大表示

モーダルウィンドウを使えば、画像をクリックまたはタップしたときに、画面中央に原寸大の画像を表示することもできます。（右のレインボーの画像をクリックまたはタップしてみてください。）

画像を原寸大* で画面中央に表示するコードです。
オリジナルの画像自体が小さい場合は、拡大されません。

※表示画面より大きいサイズの場合、適正サイズまで縮小

クリック or タップで拡大します。
もう一度クリック or タップで閉じます。

具体的な実装方法は以下記事で紹介していますので、ぜひ合わせてご覧ください。