モーダルウィンドウの実装

2025年1月22日 16:52

モーダルウィンドウの実装（実装課題）

メニュー一覧の画像をクリックする
縦横画面いっぱいに薄いグレーの背景ボックスを表示
その枠の中心に拡大されたメニュー写真を表示
画面のどこかをクリックすると拡大写真と背景ボックスを非表示
アニメーションはフェードイン・フェードアウト

モーダルウィンドウの実装（HTML）

<div id="js-modal">
     <img src="#" alt="" id="js-modal-img">
</div>

ポップアップさせたいメニュー一覧のすぐ下に記述しました。
<div id="js-modal">：モーダルウィンドウ全体を囲む箱
<img>は画像を表示させるタグ。

モーダルウィンドウの実装（CSS）

/* 全体のスタイル */
  #js-modal {
    position: fixed;   /*モーダルを画面全体に固定*/
    top: 0;            /*画面の上端から０px*/
    left: 0;           /*画面の左端から０px*/
    width: 100%;       /*画面の横幅全体*/
    height: 100vh;     /*画面の高さ全体*/
    background-color: rgba(0, 0, 0, 0.6);     /*半透明の背景*/
    display: none;     /*初期状態で非表示に*/
    z-index: 1000;     /*他の要素より前に表示*/
  }

  /* モーダル内の画像のスタイル */
  #js-modal-img {
    position: absolute;    /*モーダル内で絶対位置を指定*/
    top: 0;                /*上端からの距離*/
    bottom: 0;             /*下端からの距離*/
    left: 0;               /*左端からの距離*/
    right: 0;              /*右端からの距離*/
    max-width: 45%;        /*画面の最大幅を45%に制限*/
    margin: auto;          /*上下左右の中央に配置*/
    display: block;        /*ブロック要素とする(中央揃え)*/
  }

CSSで厄介だったのは僕の場合、#js-modalにdisplay: flex;を記入すると
干渉し合うのか、余計な表示が出たので
#js-modal-imgに直接、ポップアップされた画像が中央に表示されるように
CSSを書きました。

モーダルウィンドウの実装（jQuery）

$(function () {
  const modalImg = $("#js-modal-img"); //モーダル内の画像を選択
  const modal = $("#js-modal"); //モーダル全体を選択

  $(".menu-item").click(function () {
    //クリックした画像のsrcを取得
    const imgSrc = $(this).find(".menu-img img").attr("src");

    modalImg.attr("src", imgSrc); //モーダル内の画像に設定
    modal.fadeIn(300); //0.3秒でフェードイン
  });

  modal.click(function () {
    modal.fadeOut(300); //0.3秒でフェードアウト
  });
});

今回は参考にしたコードが.attr();を使用していたのでこちらにしましたが
後で調べ直すと.prop();がよく使われるみたい
次に実装するときは.prop()を使ってみようかな

まとめ

モーダルウィンドウの実装ではjQueryよりもCSSで躓いた感がありました。
jQueryは画像をどうやって指定するのかがイメージ湧かなくて
色んなサイトやchatGPTに聞きまくりました。

機会があれば.attr()と.prop()の違いを調べてみようかな

追記(スクロール無効化)

画像をポップアップさせている最中に、背景がスクロールできるのが気になったので修正しました。
実装課題ではないけど、やり方を覚える意味でも

CSS(スクロール無効化)

.no-scroll {
    overflow: hidden; /*スクロールを無効化*/
  }

分かりやすく
.no-scrollというCSSを作成しました。
この時、HTMLには何も追記していません。

jQuery(スクロール無効化)

$(function () {
  const modalImg = $("#js-modal-img"); //モーダル内の画像を選択
  const modal = $("#js-modal"); //モーダル全体を選択

  $(".menu-item").click(function () {
    //クリックした画像のsrcを取得
    const imgSrc = $(this).find(".menu-img img").attr("src");

    modalImg.attr("src", imgSrc); //モーダル内の画像に設定
    modal.fadeIn(300); //0.3秒でフェードイン
    $("body").addClass("no-scroll"); //スクロールを無効化
  });

  modal.click(function () {
    modal.fadeOut(300); //0.3秒でフェードアウト
    $("body").removeClass("no-scroll"); //スクロールを有効化
  });
});

ちょっと分かりにくい感じもするけど、fadeInとfadeOutの後ろにそれぞれ
.addClass()と.removeClass()を記入しました。

fadeInしたらHTMLの<body>にCSSの(no-scroll)が.addClassされ
<body class="no-scroll">となってスクロール無効化のスタイルが当たる。

fadeOutしたら<body class="no-scroll">が.removeClassされスクロールが有効化される。

他にも色々な方法があるだろうけど今回、この方法で実装しました。