【超初心者向け】jQueryでのモーダルウィンドウの作り方 |

プラグイン必要なし、jQueryを使ったモーダルウィンドウの作り方を説明します。

モーダルウィンドウとはこんな風に、画像をクリックすると拡大して表示される機能。

サンプル動画

・画像クリックで画像拡大
・背景クリックで元に戻る
・背景をグレーにする

今回は詳細のレイアウトは省いて、「画像をクリックして拡大させる」事ができるようにしていきます！

では早速やっていこう！

HTML
1. 大まかな手順
  1. 1. モーダルウィンドウを開くためのリンク
2. 2.3 モーダウィンドウと背景
CSSを当てる
JavaScript
終わりに

HTML

大まかな手順

HTMLでは主に３つを書いていきます。

モーダルウィンドウを開くためのリンク
モーダルウィンドウ
背景（グレー部分）

1. モーダルウィンドウを開くためのリンク

<div class="sample-item">
 <a class="js-modal-open" data-target="modal01"><img src="./img/sample1.jpg" alt="サンプル１"></a>
 <p>サンプル１</p>
</div>

<div class="sample-item">
 <a class="js-modal-open" data-target="modal02"><img src="./img/sample2.jpg" alt="サンプル２"></a>
 <p>サンプル２</p>
</div>

<div class="sample-item">
 <a class="js-modal-open" data-target="modal03"><img src="./img/sample3jpg" alt="サンプル３"></a>
 <p>サンプル３</p>
</div>

</div>

</div>

</div>

divタグの<div class=”sample-item></div>の中に、imgタグで画像と、pタグで画像説明文を入れていきます。

ここではモーダルウィンドウを開くためのリンクを記述するので、使うのはaタグです。

画像を押したらモーダルウィンドウが開くようにしたいので、imgタグをaタグで囲みます。

aタグ内には、モーダルウィンドウを開くため class=”modal-open”を置きます。

現段階で、とりあえず画像が何かしらの大きさで縦に３つ並ぶかと思います。

2.3 モーダウィンドウと背景

ここではモーダルウィンドウ（拡大している表示）とその背景のHTMLを書いていきます。

※先ほどのHTMLの下に続けて書きます。

<!-- モーダル -->
<div id="modal01" class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <img src="./img/sample1.jpg" alt="サンプル１">
  </div>
</div>

<div id="modal02" class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <img src="./img/sample2.jpg" alt="サンプル２">
  </div>
</div>

<div id="modal03" class="modal js-modal">
  <div class="modal__bg js-modal-close"></div>
  <div class="modal__content">
    <img src="./img/sample3.jpg" alt="サンプル３">
  </div>
</div>
<!-- モーダル終了 -->

</div>

</div>

</div>

後々JSで命令させるときに使う箇所は「modal」を入れた名前を付けました。

class=”modal__bg js-modal-close”では、背景をクリックしたらモーダルウィンドが閉じるようにしたいのでこのような記述になります。

今回はもともと表示されている画像とモーダルウィンドウに表示されている画像を同じものにしましたが、ここで画像を変えることも可能です。

CSSを当てる

まずは自分の好みのレイアウトになるようにCSSを当てます。

今回は用意した写真が大きすぎたので、とりあえず小さく収まるようにしました。

その後にモーダル画面部分のCSSを書いていきます。

※順番はどうでもいいですが、その方がわかりやすいと個人的に思いました。

img {
  width: 100%;
}

.sample-item {
  width: 30%;
}


.modal{
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal__bg{
  background: rgba(100, 100, 100, 0.9);
  height: 100vh;
  position: absolute;
  width: 100%;
}
.modal__content{
  left: 50%;
  padding: 40px;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 70%;
}

img {

width: 100%;

}

.sample-item {

width: 30%;

}

.modal{

display: none;

height: 100vh;

position: fixed;

top: 0;

width: 100%;

}

.modal__bg{

background: rgba(100, 100, 100, 0.9);

height: 100vh;

position: absolute;

width: 100%;

}

.modal__content{

left: 50%;

padding: 40px;

position: absolute;

top: 50%;

transform: translate(-50%,-50%);

width: 70%;

}

モーダル画面のCSSは ①モーダル画面全体 ②中身　③背景　の主に３つです。

モーダル画面ははじめ表示されないので、.modalでdisplay: none;としておきます。

JavaScript

$(function(){
  $('.js-modal-open').each(function(){
      $(this).on('click',function(){
          var target = $(this).data('target');
          var modal = document.getElementById(target);
          $(modal).fadeIn();
          return false;
      });
  });
  $('.js-modal-close').on('click',function(){
      $('.js-modal').fadeOut();
      return false;
  });