※当サイトではアフィリエイト広告を利用しています

jQuery

【jQuery】モーダルウィンドウの作り方

 
【jQuery】モーダルウィンドウの作り方

今回はjQueryでモーダルウィンドウを作る方法についてまとめたいと思います。

このようなシンプルなモーダルウィンドウのサンプルを作ってみました。

See the Pen by notebook (@orange-notebook) on CodePen.

「モーダルウィンドウを表示」ボタンを押すとモーダルウィンドウが表示されます。

モーダルウィンドウ内の「×」ボタン、もしくはモーダルウィンドウの外のオーバーレイをクリックするとモーダルウィンドウが閉じます。

またスクロールしてもモダールウィンドウの位置が画面の真ん中で固定されて表示されるようになっています。

まずモーダルウィンドウを作るためのポイントを簡単にまとめたいと思います。

実装のポイント
  • ボタンをクリックしたら、モーダルウィンドウとオーバーレイを表示する。
  • モーダルウィンドウ内の閉じるボタンかオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイを消す。
  • モーダルウィンドウの位置を固定する。(今回は画面の真ん中に固定)
  • オーバーレイを表示するときは、画面全体を覆うようにする

今回はモーダルウィンドウとオーバーレイの表示の切り替えを、jQueryの「fadeIn」と「fadeOut」を使って行いたいと思います。

クリックできる目次

HTML

HTMLの全体はこんなかんじになっています。

<!-- クリックしてモーダルを表示させるボタン -->
<a href="#" class="btn">モーダルウィンドウを表示</a>

<!-- オーバーレイ(黒い背景) -->
<div class="overlay"></div>

<!-- モーダルウィンドウ -->
<div class="modal">
  <!-- モーダルウィンドウを閉じる×ボタン -->
  <div class="close">×</div>
    <h2>モダルのタイトル</h2>
    <p>ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。ここにモダルの内容が入ります。</p>
</div>

<!-- 高さを出すためのsectionタグ -->
<section></section>

HTMLでは以下のパーツを作っていきます。

  1. クリックしてモーダルウィンドウを表示させるためのボタン
  2. モーダルウィンドウ本体
  3. モーダルウィンドウを消す閉じるボタン(モーダルウィンドウの中)
  4. オーバーレイ (黒い背景)

クリックしてモーダルウィンドウを表示させるためのボタン(.btn)、モダルが表示された時に一緒に表示させるオーバーレイ(.overlay)、モーダルウィンドウ(.modal)を並列の構造で作っています。

モーダルウィンドウとは関係ありませんが、画面をスクロールする高さを出すため、sectionタグを入れています。

スクロールしてもモーダルウィンドウが真ん中に固定表示されるようになっています。

CSS

CSSの全体像はこんなかんじになっています。

/* クリックしてモーダルウィンドウを表示するボタン */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 20px;
  background: linear-gradient(to right bottom, #48D1CC, #008B8B);
  border-radius: 5px;
  color: #fff;
  margin: 20px;
  transition: 0.3s;
}

.btn:hover {
  opacity: 0.8;
}

/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* 黒い背景色(今回は黒で60%の不透明度) */
  background: rgba(0, 0, 0, 0.6);
  /* デフォルトでは非表示にしておく */
  display: none;
}

/* モーダルウィンドウ */
.modal {
  /* 大きさを指定 */
  max-width: 500px;
  width: 86%;
  /* 見た目を整える */
  padding: 15px 20px;
  background: #fff;
  /* 位置を固定表示 */
  position: fixed;
  /* 画面の真ん中に表示されるように指定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* デフォルトでは非表示にしておく */
  display: none;
}

/* モーダルウィンドウ内にある×ボタン */
.modal .close {
  /* モーダルウィンドウを基準に位置を調整 */
  position: absolute;
  top: 10px;
  right: 20px;
  /* ホバーしたらカーソルの形になるようにする */
  cursor: pointer;
  font-size: 20px;
}

/* モーダルウィンドウ内の見出しのスタイル調整 */
.modal h2 {
  font-size: 18px;
  font-weight: normal;
  margin-bottom: 10px;
}

/* モーダルウィンドウ内の文章の文字サイズの調整 */
.modal p {
  font-size: 13px;
}

/* スクロールできるように高さを出すためのsectionタグ */
section {
  height: 200vh;
}

CSSでは主にモーダルウィンドウとオーバーレイのデザイン設定を行います。

モーダルウィンドウのCSS

モーダルウィンドウで必要なCSSのポイントは以下かなと思います。

  1. 表示されたとき、画面の真ん中に表示されるようにする。
  2. モーダルウィンドウ内の×ボタンの位置の調整。
  3. デフォルトではモーダルウィンドウを非表示にしておく。

1：表示されたとき、画面の真ん中に表示されるようにする

モーダルウィンドウが画面の真ん中に表示されるようにします。

.modal {
  /* 位置を固定表示 */
  position: fixed;
  /* 画面の真ん中に表示されるように指定 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

「position: fixed;」で位置を固定し、
「top: 50%;」「left: 50%;」「transform: translate(-50%, -50%);」で
画面のど真ん中に表示されるようにします。

2：モーダルウィンドウ内の×ボタンの位置の調整

次にモーダルウィンドウ内にある×ボタンの位置を調整します。

/* モーダルウィンドウ内にある×ボタン */
.modal .close {
  /* モーダルウィンドウを基準に位置を調整 */
  position: absolute;
  top: 10px;
  right: 20px;
}

「position: absolute;」でpositionプロパティを指定している
モーダルウィンドウを基準に、×ボタンの位置を調整していきます。

3：デフォルトでは非表示にしておく

またデフォルトではモーダルウィンドウを非表示にしておきたいので、
「display: none;」で非表示にしておきます。

/* モーダルウィンドウ */
.modal {
  /* デフォルトでは非表示にしておく */
  display: none;
}

オーバーレイのCSS

次にオーバーレイで必要なCSSのポイントは以下かと思います。

  1. モーダルウィンドウと同様、デフォルトでは非表示にする。
  2. 画面全体をおおうようにする。

1：モーダルウィンドウと同様、デフォルトでは非表示にする

モーダルウィンドウと同様にオーバーレイ(黒い背景)も、デフォルトではモーダルウィンドウを非表示にしておきたいので、「display: none;」で非表示にしておきます。

/* オーバーレイ */
.overlay {
  /* デフォルトでは非表示にしておく */
  display: none;
}

2：画面全体をおおうようにする

オーバーレイは、
「position: fixed;」「top: 0;」「left: 0;」「width: 100%;」「height: 100vh;」を使って、
位置を固定し、かつ画面全体に広がるようにします。

/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
}

jQuery

モーダルウィンドウとオーバーレイの表示非表示の切り替えは、今回jQueryの「fadeIn」と「fadeOut」を使って行いたいと思います。

jQueryで必要になる実装の項目をまとめてみます。

  1. ボタンをクリックしたら、モーダルウィンドウとオーバーレイをfadeInで表示させる。
  2. モーダルウィンドウの×ボタンかオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイをfadeOutで非表示にする。

jQueryのコード全体はこんなかんじです。

$(document).ready(function(){ 
  // ボタンをクリックしたら
  $(".btn").click(function () {
    // モーダルウィンドウとオーバーレイをフェードインさせる
    $(".modal").fadeIn();
    $(".overlay").fadeIn();
  });

  // モーダルウィンドウ内の×ボタンかオーバーレイをクリックしたら
  $(".close, .overlay").click(function () {
    // モーダルウィンドウとオーバーレイをフェードアウトさせる
    $(".modal").fadeOut();
    $(".overlay").fadeOut();
   });
});

1：ボタンをクリックしたら、モーダルウィンドウとオーバーレイをfadeInで表示させる

ボタンをクリックしたら、モーダルウィンドウとオーバーレイ(黒い背景)をfadeInで表示させます。

$(document).ready(function(){ 
  // ボタンをクリックしたら
  $(".btn").click(function () {
    // モーダルウィンドウとオーバーレイをフェードインさせる
    $(".modal").fadeIn();
    $(".overlay").fadeIn();
  });
});

2：モーダルウィンドウの×ボタンかオーバーレイをクリックしたら、モーダルウィンドウとオーバーレイをfadeOutで非表示にする

今度はモーダルウィンドウとオーバーレイを消す方法です。

モーダルウィンドウ内にある×ボタンかオーバーレイ部分をクリックしたら、モーダルウィンドウとオーバーレイをfadeOutを使って非表示に切り替えます。

$(document).ready(function(){ 
  // モーダルウィンドウ内の×ボタンかオーバーレイをクリックしたら
  $(".close, .overlay").click(function () {
    // モーダルウィンドウとオーバーレイをフェードアウトさせる
    $(".modal").fadeOut();
    $(".overlay").fadeOut();
   });
});

これで完成です！
最後までお読みいただき、ありがとうございました。

【JavaScript】モーダルウィンドウの作り方
【JavaScript】モーダルウィンドウの作り方今回はjavaScriptでモダルを作ったので、手順をまとめたいと思います。...
関連する記事