複数のモーダルを同じクラス名でやってみた！

サイトの画像をクリックすると拡大表示されるのをみたことはありませんか？

その拡大表示、モーダルウィンドウを実装するときにより便利だなと思ったことをやってみました。

今までモーダルを複数設置する場合、HTMLでクラス名を「modal1」「modal2」「modal3」…とつけて、モーダルが増えるたびにjQuery をそれぞれ書いていました。そこで、今回モーダルが複数でもクラス名を同じにしても、それぞれのモーダルウィンドウを表示してくれるようにやってみようと思います。

今回は、ボタンを押したらモーダルウィンドウが表示されることを想定してやります。

では、さっそくHTMLから書いていきます。

<!-- HTML -->

<div class="modal">
      <div class="modal-inner">
          <!-- openボタン -->
          <button class="openModal">OpenModal1</button>
          <button class="openModal">OpenModal2</button>
          <button class="openModal">OpenModal3</button>
          <!-- モーダル部分 -->
          <div class="modalArea"><!-- class名をmodalAreaで統一 -->
              <div class="modalBg"></div><!-- モーダルの背景-->
              <div class="modalWrapper"><!-- モーダルの中身 -->
                  <div class="modalContents">
                    <h1>contents!</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                  </div>
                  <div class="closeModal">×</div>
              </div>
          </div>
          <div class="modalArea">
            <div class="modalBg"></div><!-- モーダルの背景-->
            <div class="modalWrapper"><!-- モーダルの中身 -->
                <div class="modalContents">
                    <h1>modal contents!2</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                </div>
                <div class="closeModal">×</div>
            </div>
           </div>
           <div class="modalArea">
                <div class="modalBg"></div><!-- モーダルの背景-->
                <div class="modalWrapper"><!-- モーダルの中身 -->
                    <div class="modalContents">
                        <h1>modal contents!3</h1>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                    </div>
                    <div class="closeModal">×</div>
                </div>
           </div>
      </div>
  </div>

続いてCSSを書いてモーダルウィンドウを少し装飾します。

/* CSS */

.modal-inner {
  position: relative;
}

button {
  padding: 10px;
  background: #fff;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;
}

.modalArea {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background: rgba(30, 30, 30, 0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 500px;
  height: 315px;
  padding: 10px 30px;
  background: #fff;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

.is-open {
  display: block;
}

最後にjQueryを使ってボタンをクリックした時の動きを設定していきます。

$(function () {
  $('.openModal').click(function() {  //openModalをクリックした時に
    var btnIndex = $(this).index(); 
    //何番目のモーダルボタンかを取得
    $('.modalArea').eq(btnIndex).addClass('is-open'); 
    //クリックしたモーダルボタンと同じ番目のモーダルを表示する。addClassでis-openクラスを追加して表示する
　　　　$('html, body').css('overflow', 'hidden'); 
    // overflow:hidden;の追加で背景のスクロール禁止に
  });
  $('.closeModal, .modalBg').click(function() { //closeModalかmodalBgをクリックした時に
    $('.modalArea').removeClass('is-open'); 
    //モーダルを非表示にする。removeClassでis-openクラスを削除して非表示にする
　　　　$('html, body').removeAttr('style'); 
    //追加したoverflow:hidden;を削除
  });

});

これだけ書いておけば、1,2,3番目のボタンをそれぞれクリックしたときに、それに応じたモーダルを表示するようになりました。ボタンを増やしたいと思った時にjQueryも追加で書かなくていいと思えばちょっとは楽ですよね。

背景をスクロール禁止にする方法は、いろいろあるみたいですが今回は、上記のものを使ってみました。もっといい方法があれば教えてください。

あと今回は、表示非表示のときにdisplay:none;,display:block;とaddClass(),removeClass()をくみあわせて表示非表示にする方法でしたが、もちろんfadeIn(),fadeOut()でもできました。ふわっと出てくる感じもいいですね。

以上、同じクラス名で複数モーダルやってみたでした〜