Date-posted: 2020/11/24
Last-Modified: 2022/06/18

[jQuery]画像のモーダル表示の実装方法(ライブラリ等使用なし)

プログラミング jQuery

はじめに

HTML, CSS, jQueryで画像のモーダル表示の実装を行う方法を備忘録のためにまとめておりますが、参考になれば幸いです。

この記事では、モーダル表示用のライブラリやBootstrap等は使用はせず、HTML, CSS, jQueryをゼロから記述する方法を記載しております。

開発環境

• HTML 5
• CSS 3
• jQuery 3.1.1

コード

<div class="items">
  <div class="item">
    <img src="images/html.png">
    <p>HTML</p>
  </div>
  <div class="item">
    <img src="images/css.png">
    <p>CSS</p>
  </div>
  <div class="item">
    <img src="img/jquery.png">
    <p>jQuery</p>
  </div>
</div>
<div id="gray-display"></div>
<div id="large-img"></div>

#gray-display {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5c5c5c;
  opacity: 0.8;
}

#large-img {
  position: fixed;
  top: 20%;
  right: 20%;
  bottom: 20%;
  left: 20%;
}

$(function() {
  var grayDisplay = $('#gray-display');
  var largeImg = $('#large-img');

  grayDisplay.hide();
  largeImg.hide();

  $(".item img").click(function() {
    const targetImg = $(this).attr('src');
    grayDisplay.show();
    largeImg.append(`<img src="${targetImg}">`);
    largeImg.show();

    grayDisplay.click(function() {
      $(this).next().fadeOut(200, function() {
        grayDisplay.hide();
        largeImg.children().remove();
      });
    });
    return false;
  });
});

コードの説明

index.html

• 3, 7, 11行目
• 画像を複数準備する。

• 15行目
• モーダル表示した際に画像以外の部分は画面を暗くするため、暗い画面クラスを準備する。

• 16行目
• モーダル表示した際に拡大した画像を表示するためのクラスを準備する。

style.css

• 1〜9行目
• position: fixed; を設定することで、画面を暗くできる(どのビューよりも一番手前に表示される設定ため)。
• top: 0; , left: 0; はposition: fixed としたために必要な設定。
• widthとheightを100%にして画面いっぱいに表示し、色と透明度を設定。

• 11〜17行目
• position: fixed; とすることで拡大画像を画面の一番手前に表示することができる。
• top, right, bottom, leftを20%とすることで、画面の中心に画像を表示することができる。20%の数字を変えると画像の大きさも変化する。

modal.js

• 2〜3行目
• モーダル表示用の2つのidは何度も使用するため、変数として格納しておく。

• 5〜6行目
• 画面読み込み時(最初の表示のとき)はモーダル表示用の画面は不必要なため、hideメソッドで表示しないようにしておく。

• 8行目
• 画像をクリックするとイベントが発火する(3つある画像のどれでも可)。

• 9行目
• クリックされた画像のsrc属性の値を取得する。

• 10〜12行目
• grayDisplay.show() で画面全体を暗くする。
• largeImg.append(…) で画像の情報を含んだimgタグをlargeImgクラスに追加し、showメソッドで表示する。

• 14行目
• 画面の暗くなった部分をクリックすると、モーダル表示した画像と暗くなった画面がfadeOutメソッドで消える。

さいごに

今回はモーダル表示の仕組みを理解するという目的で学習し、記事にしました。意味が理解できている方は、ライブラリ等を使用したほうが効率が良いと思いますので、あくまで参考としてご活用していただけると幸いです。

• facebook
• Tweet