【jQuery】モーダルウィンドウの構造を理解しよう！その1（未完）【単一画像】 #CSS

モーダルウィンドウって地味によく使いますよね。
今ちょうど文字がいっぱい詰まってる画像を使うところで見にくいからクリックで拡大表示させたい案件発生中です。
せっかくなのでモーダルウィンドウを自作してみます！

【作成計画（ふわっと版）】

クリックしたら大きい画像とタイトル
できればアニメーションしてうにょーんって出てほしい
当然レスポンシブ

具体的な作成計画

クリック後にでっかい画像が真ん中表示 ⇒ imgタグの中身を入れ替える⇒ cssじゃ無理そうだから【jQuery】で作成！
背景を半透明の灰色にする ⇒ positionプロパティでなんやかんやしたらいけそう！⇒ 【css】で作成！
画像がうにょーんってアニメーションする ⇒ transition でいけそう ⇒ 【css】で作成！

・・・あれ？これだけできれば結構モーダルウィンドウっぽくなりそう！

作成① とりあえずCSSをつくろう

とりあえず小さいほうの画像を真ん中に表示して背景半透明の灰色なCSSを作成します！
こんな感じのHTMLで。

HTML

<figure class="modal"><img src="img01.jpg"></figure>

画面のど真ん中に画像を表示させるよ！

CSS(画面のど真ん中に配置)

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;

position ～ transformプロパティが画像をど真ん中に表示させる方法です。translate 超便利
z-index で画像が一番上にくるようにテキトーに9をいっぱい入れます。

背景を黒半透明にするよ！

HTMLに背景用のタグを追加します。

HTML

<P class="modalBack"></p>
<figure class="modal"><img src="img01.jpg"></figure>

CSS（黒半透明背景）

.modalBack{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background: rgba(0,0,0,0.6);
    z-index: 999;

【ポイント】

z-indexに、ちょっと控えめに９をいっぱい入れ、「画像＞半透明背景」になるようにします。
スマホ対策としてheightを120％にする。iPnoneなどはナビバーが出たり引っ込んだりするため、jQueryの計算がおかしくなるそうだ。

作成② jQuery を書いてみよう

まずは簡単そうな画像と背景表示非表示に挑戦です。

透明背景を display:none; で一旦非表示にしておきます。

jQuery(画像クリックで背景表示)


$(function() {
  // 「.modal」画像をクリック時に、showメソッドでHTML要素を表示する
  $('.modal').on('click', function() {
    $('.modalBack').show();
  });

かくして実行してみたら透明背景は狙い通りに動きました！・・・でも思ってたのと違う（笑）
真ん中に小さいほうの画像（サムネイル）が常にドドーンとあります。
えーとつまり、

.modalは最初から画像に付けてはいけない ⇒ addclassで後から付ける！
サムネイルをクリックしたら大きい画像に変わるようにしないといけない ⇒ attr()で要素を変更する！

今度はこれに挑戦してみます！

目指せモーダル

HTML(大きい画像の情報も追加)

<P class="modalBack"></p>
<figure class="beforeModal"><a href="img01_l.jpg"><img src="img01.jpg"></a></figure>

HTMLはこのように書き替えてみました。
① .modal は一旦外して別のクラス名（.beforeModal）をつける
② attr() で大きいほうの画像名が取得できるようにaリンクをつける

jQuery(サムネイル画像クリックで画像と背景表示)


$(function() {

    $('.beforeModal').on('click', function() {
  // 「.beforeModalのimgタグ」の中の src の中身を「.beforeModalのaタグ」の中の href の中身に変える
    $('img',this).attr('src',$('a',this).attr('href'));
  // 「.beforeModal」に「.modal」を追加する
    $(this).addClass('modal');
  // 「.beforeModal」画像をクリック時に、showメソッドでHTML要素を表示する
    $('.modalBack').show();
    return false;
    });
});

できたし、思った通りに動いたけど・・・大きい画像がサムネイルのサイズのままで表示される ので意味ない。

ええー。

もうちょっと調べます・・・。