ZeroPlus Media > Web制作 > HTML/CSS > JavaScriptを使ったモーダルウィンドウの作り方を解説

JavaScriptを使ったモーダルウィンドウの作り方を解説

HTML/CSS

2023/03/22

2023/06/02

この記事では「JavaScriptを使ったモーダルウィンドウの作り方」について解説します。

モーダルウィンドウは会員登録や警告メッセージなど、大事な情報をユーザーに見てもらいたいときに使われます。

この記事で身につく内容

JavaScriptを使ったモーダルウィンドウの作り方

jQueryでモーダルウィンドウを作る方法は下記の記事をご覧ください。

【jQuery】意外と簡単に作れる！モーダルウィンドウの実装方法

JavaScriptが難しくて挫折しそうなあなたへJavaScriptは独学で進めると難しい内容も多いですよね。相談相手がいないと煮詰まってしまうこともあるかと思います。

もし学習の進め方について悩まれているならば、ZeroPlusの無料相談会への参加をお勧めします。

ZeroPlusはWeb制作のフリーランス育成に特化したプログラミングスクールです。超フレンドリーなメンターがあなたの疑問や悩みについて、なんでもお答えします。

＼お申し込みは30秒で終わります。／

まずは無料で相談してみる

学習方法の悩み、私たちと一緒に解消しましょう！

モーダルウィンドウとは、画面の上にウィンドウ画面が表示される機能
- JavaScriptでモーダルウィンドウを実装するポイント
モーダルウィンドウを実装してみよう！
モーダルウィンドウを実装するときは、細かく分解して考えよう。

モーダルウィンドウとは、画面の上にウィンドウ画面が表示される機能

モーダルウィンドウとは、画面上にあるボタンをクリックすると元の画面の上に新たなウィンドウ画面が表示される機能のことです。

モーダルウィンドウとよく似た機能にポップアップがあります。モーダルウィンドウとポップアップの違いには、

ポップアップ：他のウィンドウとを一緒に開くことができる
モーダルウィンドウ：その画面を操作を終えないと画面を遷移できない

という点があります。

モーダルウィンドウは特定の操作が終わらないと、他の画面に遷移できません。その機能を利用して、例えばユーザーに会員登録などの特定の操作をさせて、会員登録中には他の操作ができないようにすることができます。

サンプルコードで動きを確認してみましょう。

See the Pen modal-js by ZeroPlus (@zeroplus-programming) on CodePen.

オレンジ色のボタンをクリックすると、画面中央に新たなウィンドウ画面が表示されます。このウィンドウをモーダルウィンドウといいます。

モーダルウィンドウが開いている間は、オレンジ色のボタンはクリックできません。モーダルウィンドウのxボタンをクリックするとモーダルウィンドウが閉じて、他の操作ができるようになります。

JavaScriptでモーダルウィンドウを実装するポイント

この記事で紹介するモーダルウィンドウ実装のポイントは下記のとおりです。

モーダルウィンドウ実装ポイント

ボタンをクリックすると、モーダルウィンドウ画面とグレーの背景が表示される
xボタンをクリックすると、モーダルウィンドウ画面とグレー背景が閉じる
モーダルウィンドウが表示されている間、ボタンはクリックできない

機能を実装する場合、上記のように機能を細かく分解して実装するのがポイントです。

モーダルウィンドウを実装してみよう！

ここからは具体的にJavaScriptを使ってモーダルウィンドウを実装していきます。

HTMLとCSSでボタンを作る

モーダルウィンドウを表示するためのボタンをHTMLとCSSで作成します。

<button class="button js-modal-button">モーダルボタン</button>

.button {
  background: orange;
  border-radius: 12px;
  box-shadow: 2px 4px 6px 3px rgba(0, 0, 0, .24);
  border: 1px solid orange;
  font-size: 16px;
  line-height: 1.6;
  display: block;
  padding: 12px 20px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  margin: 0;
}

出力結果

モーダルにはJavaScriptで制御するためのjs-modal-buttonクラスを付与しておきます。

モーダルウィンドウ画面とグレー背景を作る

モーダルウィンドウ画面とグレー背景を作成します。

<div class="layer js-modal">
  <div class="modal">
    <div class="modal__inner">
      <div class="modal__contents">
        <div class="modal__content">
          コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
        </div>
      </div>
    </div>
  </div>
</div>

/* グレー背景 */
.layer {
  background: rgba(0, 0, 0, .2); /* 背景を薄くする *
  width: 100%;
  height: 100%;
  position: fixed; /* 画面に固定するために指定 */
  top: 0;
  left: 0;
}

/* モーダルコンテンツ */
.modal {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  min-width: 440px;
}

.modal__inner {
  margin-top: 125px;
  margin-bottom: 125px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  box-shadow: 3px 4px 4px rgba(0, 0, 0, 0.25);/* モーダルにシャドウをかける */
  border-radius: 13px; /* モーダルの角を丸める */
  display: block;
  padding: 21px 8px 21px;
  height: auto;
}

.modal__content {
  padding-top: 15px;
  padding-bottom: 23px;
}

出力結果

layer要素でグレー背景を作成します。グレー背景はposition: fixed; で画面に固定し、その際にtop: 0; 、left: 0; もいっしょに指定します。

layer要素には、JavaScriptで制御するためのjs-modalクラスを付与しておきます。

モーダルに×ボタンを作成する

表示したモーダルを閉じるためのxボタンをHTML、CSSで作成します。

<div class="layer js-modal">
  <div class="modal">
    <div class="modal__inner">
     <!-- ×ボタン追記 -->
     <div class="modal__button-wrap">
       <button class="close-button js-close-button">
         <span></span>
         <span></span>
       </button>
      </div>
      <div class="modal__contents">
        <div class="modal__content">
          コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。コンテンツが入ります。
        </div>
      </div>
    </div>
  </div>
</div>

.modal__button-wrap {
  position: absolute;
  right: 10px;
  top: -28px;
  display: inline-flex;
}

.close-button {
  position: relative;
  width: 39px;
  height: 39px;
  background: orange;
  border-radius: 50%;
  padding: 0;
  border: transparent;
  cursor: pointer;
}

.close-button span {
  width: 25px;
  height: 2px;
  background: #fff;
  display: inline-block;
  position: absolute;
  left: calc(50% - 12px);
  top: 50%;
  border-radius: 20px;
}

.close-button span:nth-child(1) {
  transform: rotate(45deg) translate(-1px, -1px);
}

.close-button span:nth-child(2) {
  transform: rotate(-45deg) translate(1px, -1px);
}

出力結果

×ボタンはspanタグで作成し、transformプロパティのrotateで×になるように調整しています。×ボタンの位置は、modal__button-wrap要素にposition: absolute;を適用し、top、rightなどで位置を指定しています。

位置の基準となる親要素のmodal__inner要素には、position: relative; を適用しています。

xボタンにはクリックしたらモーダルが非表示になるようにJavaScriptで制御したいので、js-close-buttonクラスを付与しておきます。

ここまででモーダル表示状態ができました。

モーダル非表示時の状態を作る

モーダル非表示の状態（初期状態）を作成します。

画面初期表示時はモーダル非表示なので、CSSに下記のように追記します。

.layer {
  background: rgba(0, 0, 0, .2);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;

  /* 追記 */
  z-index: -1; 
  opacity: 0;
  visibility: hidden;
}

.modal {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  min-width: 440px;

  /* 追記 */
  opacity: 0;
  visibility: hidden;
}

出力結果

モーダルが非表示になりました。

layer要素は初期状態では最背面に配置したいので、z-index: -1; を適用します。また、opacityプロパティやvisibilityプロパティでモーダルやグレー背景を非表示の状態にします。

次にモーダルボタンをクリックしたら、layer要素にクラスを付与するようにします。ここではis-openクラスを付与します。CSSで下記のように追記してください。

.layer.is-open {
  z-index: 999;
  opacity: 1;
  visibility: visible;
}

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

これでlayer要素にis-openクラスが付与されたとき、モーダルとグレー背景が表示されるようになります。

ボタンをクリックしたらJavaScriptでクラスを付与する

モーダルボタンをクリックしたら、layer要素にis-openクラスが付与される処理を行うように、下記のようにJavaScriptを記述します。

 
const modal = document.querySelector('.js-modal'); // layer要素に付与したjs-modalクラスを取得し変数に格納
const modalButton = document.querySelector('.js-modal-button'); // button要素に付与したjs-modal-buttonクラスを取得し、変数に格納

// モーダルボタンをクリックしたときのイベントを登録
modalButton.addEventListener('click', () => {
  modal.classList.add('is-open');
});

classList.add で要素にクラスを付与することができます。

出力結果

モーダルボタンをクリックすると、モーダルが表示されます。現状ではモーダルのxボタンをクリックしてもモーダルは非表示になりません。

xボタンをクリックしたらモーダルを非表示にするために、JavaScriptに下記の記述をします。

const modal = document.querySelector('.js-modal');
const modalButton = document.querySelector('.js-modal-button');

// 追記
const modalClose = document.querySelector('.js-close-button');　// xボタンのjs-close-buttonを取得し変数に格納

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

// 追記
modalClose.addEventListener('click', () => { // xボタンをクリックしたときのイベントを登録
  modal.classList.remove('is-open'); 
});

出力結果

モーダルボタンクリックでモーダルが表示され、xボタンをクリックするとモーダルが非表示になります。

モーダルの機能そのものはこれで完成です。

ふわっと表示・非表示するアニメーションを追加する場合

現状ではモーダルの表示・非表示がパッと切り替わるような状態です。

ふわっと表示・非表示する場合は、CSSに下記のように追記します。

.layer {
  background: rgba(0, 0, 0, .2);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;

  /* 追記 */
  transition: opacity 1s linear, visibility 1s linear, z-index 1s linear;
}

.modal {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  width: 80%;
  min-width: 440px;
  opacity: 0;
  visibility: hidden;

  /* 追記 */
  transition: visibility .7s linear, opacity .7s linear;
}

出力結果