画像をクリックで拡大表示する[JQuery]

ギャラリーに便利！モーダルの作り方

See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.

解説

HTML

li class=”modal__open” がクリックされると クリックされた li の data-target と同じ id の要素が表示される仕組み。

div class=”modal” の子要素は

• .modal__bg = 黒色の背景
• .modal__content = 画像クリックで出てくるコンテンツの中身
• .close__text = 右上の「閉じる」となっている。

「黒色の背景」か「閉じる」をクリックすると .modal__close がついているのでモーダルが閉じる。

CSS

ul

• list-style = li の黒い点を消す
• display: flex; = li を横並びにする
• justify-content: space-evenly; = 横並びにした li に等間隔のスペースをとる

li

• width: 30%; = li が3つあるので、3等分の幅を取らせる。あまりは余白。
• height: auto; = 高さを幅に合わせる
• text-align: center; = li 内の子要素を中央揃えにする

li img

• width: 100%: = 画像を親要素の li に合わせたサイズに変更。これがなければ画像が親要素よりも大きくなってしまう場合がある。
• height: auto; = 高さを横幅に合わせる。

.modal__open:hover

• cursor: pointer; クリックできる要素と知らせるためにカーソルを乗せた時、指の形に 変更

.modal

• height: 100vh; = モーダルが画面高さいっぱいになるように vh の値を使用
• position: fixed; = スクロールした時もくっついてくるように fixed で固定
• top: 0; left: 0; = 要素の位置を左上に固定
• width: 100%; = 画面の横幅いっぱいになるように 100%で設定
• z-index: 2; = 他の要素と被った時に上面に表示されるように。もっと大きな数値を使用しても良い

.modal__bg

• background: rgba(0, 0, 0, 0.8); = モーダルの背景の黒色を設定、0, 0, 0, で黒色、最後の 0.8 で背景の透明度を調整

• height: 100vh; = 背景が画面いっぱいを覆うように vh の単位を使用
• position: fixed; = 背景がスクロールでずれないように fixed で固定
• left: 0; = 要素の位置を左側に固定
• width: 100%; = 横幅を画面いっぱいになるように 100%で設定

.modal__content

• font-size: 14px; = モーダルの中身のフォントサイズを調整
• background: white; = モーダルの背景、見やすいように白色で設定中
• padding: 32px; = 「白い枠」と「文字」の間の余白の調整
• position: absolute; = 白い枠を画面中央に寄せるために absolute に設定
• top: 50%; left: 50%; = 要素の左上を画面中央に固定
• transform: translate(-50%, -50%); = 要素の高さと幅の数値の 50%ずつ 上と左に移動
• width: 60%; = 白い枠の幅を画面幅の 60% に設定
• max-width: 500px; = 最大サイズを500px までにする事で、要素が大きすぎた時の表示崩れを防いでいる。

.modal__content img

• width: 70%; = モーダル内の画像を白い枠の70%の幅とする
• height: auto; = 画像の高さを幅に合わせる

.close__text

• color: red; = 「閉じる」のテキストを赤色に変更
• position: absolute; = 「白い枠」をベースに位置調整できるように absolute を設定
• top: 10%; = 「白い枠」の上の位置から 枠の高さの10% の位置に固定
• right: 5%; = 「白い枠」の右端から 枠の幅の5% の位置に固定

JQuery

• $(‘modal__open’).each(function(){ 枠内 }); 全ての class=’modal__open’ に枠内の処理を繰り返す
• $(this).on(‘click’, function(){ 枠内 }); この場合の $(this) は class=’modal__open’ 。 $(this) がクリックされた場合、枠内の処理を行う
• var target = $(this).data(‘target’); クリックされた class=’modal__open’ の data-target の値を 変数 target に挿入
• var modal = document.getElementById(target); 変数 target と同じ ID を持つ要素を 変数 modal に挿入
• $(modal).fadeIn(); 変数 modal の要素をゆっくりと表示する
• $(‘.modal__close’).on(‘click’, function(){ 枠内 }); class=’modal__close’ がクリックされた時、枠内の処理を行う
• $(‘.modal’).fadeOut(); class=’modal’ をゆっくり表示を消す