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

2024年9月5日

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

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

【JS&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」を使います。以下のような実装に向いています。

あわせて読みたい

【JS&CSS】クリック（タップ）で画像を拡大させる transform: scale;を使って、画像や図形を拡大表示させる方法を紹介します。自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればとも思います！…

詳解 ④（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つを想定し、それぞれで表示される内容やレイアウトを変えられま…

【応用1】画像を拡大表示

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

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

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

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

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

あわせて読みたい

【JS&CSS】画像をクリックしたら拡大表示する方法（モーダルウィンドウ）画像をクリックまたはタップすると、画面中央に原寸大の画像をフワッと表示する方法を紹介します。（右のレインボーの画像をクリックまたはタップしてみてください…

【応用2】お知らせ表示

モーダルウィンドウを使ったお知らせ表示です。クリックしたお知らせに合わせて表示されるコンテンツが異なるのがポイントで、タブメニューのようなUIを実装できます。

お知らせ 1
お知らせ 2
お知らせ 3

お知らせに応じた内容が表示されます。

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

あわせて読みたい

【JS&CSS】タブ＆モーダルを組み合わせてお知らせ表示を実装する本記事では、以下のようなモーダルウィンドウを使った「お知らせ表示」の実装方法を、HTML / CSS / JavaScriptのコード付きで紹介します。お知らせ 1 お知らせ 2 お知…

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

あわせて読みたい

Webデザイン・UIコンポーネント集（HTML/CSS/JS） Webサイトやアプリで使われている『Webデザイン』や『UI』の実装例を纏めました。（随時更新中）実装方法などは別記事にコードや実装ポイントを公開していますので、自…

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！