Chapter05 モーダルウインドウ

概要と目標今まで学習した知識を使って、
モーダルウインドウを作成しよう。

今まで学習した知識を使えば、様々な機能を作ることができる
まずは、モーダルウインドウをできるだけ自力で作ってみましょう。

今回のゴール

RERUN

新しいウインドウで表示する

モーダルウィンドウとはコンテンツをウインドウ内に
重ねて表示させる。

サムネイル画像をクリックすると、大きな画像がポップアップして表示する演出はよく見かける。
このように、コンテンツをウインドウ内に重ねて表示する演出をモーダルウィンドウという。

モーダルウィンドウの表示例

RERUN

新しいウインドウで表示する

HTMLの作成サムネイル用の画像を表示し、
ポップアップ用の画像にリンク。

まずは、HTMLを用意します。
img要素には、サムネイル用の画像を参照し、
a要素で、ポップアップ用の画像にリンクを指定する。

HTMLを作成しよう

  1. 「chapter05」 › 「modal-window」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、各画像とその画像のラージサイズのファイルへのリンクをを記述
chapter05/modal-window/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像のモーダルウインドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>画像のモーダルウインドウ</h1>

  <ul>
    <li>
      <a href="images/pizza-large.jpg">
        <img src="images/pizza-thumb.jpg" alt="ピザ">
      </a>
    </li>
    <li>
      <a href="images/pasta-large.jpg">
        <img src="images/pasta-thumb.jpg" alt="パスタ">
      </a>
    </li>
    <li>
      <a href="images/hamburger-large.jpg">
        <img src="images/hamburger-thumb.jpg" alt="ハンバーガー">
      </a>
    </li>
    <li>
      <a href="images/onigiri-large.jpg">
        <img src="images/onigiri-thumb.jpg" alt="おにぎり">
      </a>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>
  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像が表示され、画像をクリックするとラージサイズのファイルへ移動するかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

クリックイベントの作成サムネイル画像をクリックで
処理を発動する。

クリックイベント要素のclass属性を、サムネイル画像の a要素に指定する。
後は、jQueryで、クリックイベントのメソッドを記述する。

クリックイベントを作成しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をテキストエディタで開く
  2. 下記を参考に、a要素にクリックイベント用のclass属性を記述
chapter05/modal-window/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>画像のモーダルウインドウ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>画像のモーダルウインドウ</h1>

  <ul>
    <li>
      <a href="images/pizza-large.jpg" class="js-modalWindow">
        <img src="images/pizza-thumb.jpg" alt="ピザ">
      </a>
    </li>
    <li>
      <a href="images/pasta-large.jpg" class="js-modalWindow">
        <img src="images/pasta-thumb.jpg" alt="パスタ">
      </a>
    </li>
    <li>
      <a href="images/hamburger-large.jpg" class="js-modalWindow">
        <img src="images/hamburger-thumb.jpg" alt="ハンバーガー">
      </a>
    </li>
    <li>
      <a href="images/onigiri-large.jpg" class="js-modalWindow">
        <img src="images/onigiri-thumb.jpg" alt="おにぎり">
      </a>
    </li>
  </ul>

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>
  1. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  2. クリックイベントを記述
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {

  });
});

答えを見る

  1. 上書き保存
ブラウザでの表示例

RERUN

新しいウインドウで表示する

リンク機能の無効化a要素クリック時の、
ページ遷移を防ぐ。

a要素はリンクの要素の為、 クリックしたら、リンク先のページにジャンプする。
クリックイベント内の 最後にreturn false;を追加するか、
クリックイベントの無名関数に引数を指定し、preventDefault()メソッドを使えば、
デフォルトの機能を無効化出来る。

リンク機能を無効化しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  2. クリックイベント内に、リンク機能を無効にするコードを記述
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックした時に、リンク先に移動しないかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

オーバーレイの作成半透明の黒い背景で、
ウインドウ全体を覆い尽くす。

body要素の末尾に、div要素を追加し、
CSSでウインドウ全体がオーバーレイ(黒い半透明)になるように設定する。

オーバーレイを作成しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  2. body要素の子要素の末尾に、空のdiv要素を追加
    （class名： "overlay"）
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックするたび、 body要素の末尾にdiv要素が追加されることを、
    ブラウザのデベロッパーツール（「右クリック」→「検証」）で確認
  4. 下記を参考にCSSでオーバーレイをスタイリングする
chapter05/modal-window/style.css
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  /*
    rgba ・・・ Red Green Blue Alpha
    CSS3で追加された色の設定方法（IE9 〜 ）
    RGBを10進数で指定し、最後に透明度を 0 〜 1 の範囲で指定する（半角カンマ区切り）
  */
}
  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックするとオーバーレイが表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

フェードインの設定オーバーレイをフェードインで表示する

CSSで.overlayをdisplay: noneで非表示にしておき、
jQueryでフェードインさせる。

オーバーレイをフェードインしよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「style.css」をテキストエディタで開く
  2. 下記を参考に、CSSで.overlayを非表示にする
chapter05/modal-window/style.css
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  /*
    rgba ・・・ Red Green Blue Alpha
    CSS3で追加された色の設定方法（IE9 〜 ）
    RGBを10進数で指定し、最後に透明度を 0 〜 1 の範囲で指定する（半角カンマ区切り）
  */
}
  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  3. jQueryでフェードインを設定する
    （スピードは任意）
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックするとオーバーレイがフェードインするかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

img要素の生成・追加href属性を活用し、
拡大表示用のimg要素を生成。

クリックしたサムネイル画像のhref属性に指定した、
ポップアップ用の画像ファイルのパスを取得し、
新たなimg要素を生成する。

img要素を生成し、追加しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  2. イベントを発生させた要素のhref属性の属性値を変数に取得する（変数名: "target"）
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    console.log(target);

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. ブラウザのコンソール（「右クリック」→「検証」→「Console」）で
    href属性の属性が取得できているかを確認
  4. console.log()をコメントにし
    取得した取得したファイルパスを使って、 img要素を文字列として変数に代入
    （変数名: "largeImg"）
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 変数に生成したimg要素を、.overlayの子要素として追加
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // リンク機能を無効化
    return false;
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. 画像をクリックするとオーバーレイ内に画像が表示されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

拡大画像のCSSpositionを使って、
ウインドウの中央に配置。

ポップアップした画像がウインドウの中央になるようにCSSを設定。

拡大画像のCSSを調整しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「style.css」をテキストエディタで開く
  2. .overlayのスタイルの下に、ポップアップした画像が
    ウインドウの中央になるようにCSSを設定
    なお、画像がウインドウを飛び越えることを防ぐために、
    max-width: 80%;とmax-height: 80%;も記述
chapter05/modal-window/style.css
.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  max-width: 80%;
  max-height: 80%;
}

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. ブラウザでポップアップ画像が画面の中央に配置されるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

非表示用のイベントオーバーレイをクリックしたら、
モーダルウィンドウを非表示にする。

.overlayをクリックしたら、モーダルウィンドウを非表示にしたい。
しかし、 .overlayは、jQueryによって追加された要素のため、
イベントが設定出来ない。jQueryで追加した要素にイベントを設定するには、
イベントを設定したい 親要素にon()メソッドを設定し、
on()メソッドの第二引数にセレクタを指定する。

非表示用のイベントを設定しよう

  1. 「chapter05」 ›「modal-window」フォルダ内の「app.js」をテキストエディタで開く
  2. 非表示用のイベントを設定
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // リンク機能を無効化
    return false;
  });

  // 非表示用のクリックイベント
  $('body').on('click', '.overlay', function () {
    // 自身をフェードアウトで非表示にし、コールバック関数発動
    $(this).fadeOut(300, function () {
      // フェードアウト完了後、自身を削除
      $(this).remove();
    });
  });
});

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. オーバーレイ部分をクリックすると非表示になるかを確認
  4. 「chapter05」 ›「modal-window」フォルダ内の「style.css」をテキストエディタで開く
  5. 下記を参考にCSSで、.overlayにマウスが乗った時の
    カーソルの形状を変更
chapter05/modal-window/style.css
.overlay {
  cursor: pointer;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  /*
     rgba ・・・ Red Green Blue Alpha
     CSS3で追加された色の設定方法（IE9 〜 ）
     RGBを10進数で指定し、最後に透明度を 0 〜 1 の範囲で指定する（半角カンマ区切り）
  */
}

答えを見る

  1. 上書き保存
  2. 「chapter05」 ›「modal-window」フォルダ内の「index.html」をブラウザで開く
  3. オーバーレイ部分をカーソルを合わせた時にポインターが変わるかを確認
ブラウザでの表示例

RERUN

新しいウインドウで表示する

練習問題 モーダルウィンドウ表示時は、
スクロールを止めよう。

モーダルウィンドウを表示中に、スクロールホイールを回すと、
モーダルウィンドウの後ろにあるコンテンツが、スクロールされる。
この問題を解決するコードを追記して下さい。
（ヒント： body要素に overflow: hidden を指定すればスクロールしない）

ブラウザでの完成例

RERUN

新しいウインドウで表示する

解答例
chapter05/modal-window/app.js
$(function () {
  /* =============================
   画像のモーダルウインドウ
  ============================= */
  $('.js-modalWindow').click(function () {
    // body要素内の末尾にdiv要素を追加
    $('body').append('<div class="overlay"></div>');

    // .overlay をフェードイン
    $('.overlay').fadeIn(300);

    // イベントが発生した要素のhref属性の属性値を取得
    var target = $(this).attr('href');
    // console.log(target);

    // 新たなimg要素を生成
    var largeImg = '<img src="' + target + '" class="content">';

    // .overlay の子要素として追加
    $('.overlay').append(largeImg);

    // body要素に is-active classを追加
    $('body').addClass('is-active');

    // リンク機能を無効化
    return false;
  });

  // 非表示用のクリックイベント
  $('body').on('click', '.overlay', function () {
    // 自身をフェードアウトで非表示にし、コールバック関数発動
    $(this).fadeOut(300, function () {
      // フェードアウト完了後、自身を削除
      $(this).remove();

      // body要素の is-active classを外す
      $('body').removeClass('is-active');
    });
  });
});
chapter05/modal-window/style.css
.is-active {
  overflow: hidden;
}

解答例は全問題のチェックボックスが on になるとご覧いただけます。

まとめ 今までの内容を組み合わせると
いろんな機能が作れる

今まで学習してきたものを使えば、様々な機能が作れる。
あとはそれを思いつく想像力が大切。