【jQuery】クッリクした画像が拡大するモーダルウィンドウを作成する方法

• jQueryを使用して、クッリクした画像が拡大するモーダルウィンドウを作成したいな…

このような疑問にお答えします！

【jQuery】クッリクした画像が拡大するモーダルウィンドウを作成する方法

完成イメージ

完成イメージは下記のとおり。

HTMLコード

HTMLコードは下記のとおり。

<div class="modal">
  <div class="inner">

    <!-- モーダルを開くボタン -->
    <div class="modal__images">
      <div class="modal__image modal__trigger">
        <img src="<?php echo esc_url(get_theme_file_uri('lib/images/img_dummy01.jpg')); ?>" alt="">
      </div>
      <div class="modal__image modal__trigger">
        <img src="<?php echo esc_url(get_theme_file_uri('lib/images/img_dummy02.jpg')); ?>" alt="">
      </div>
      <div class="modal__image modal__trigger">
        <img src="<?php echo esc_url(get_theme_file_uri('lib/images/img_dummy03.jpg')); ?>" alt="">
      </div>
      <div class="modal__image modal__trigger">
        <img src="<?php echo esc_url(get_theme_file_uri('lib/images/img_dummy04.jpg')); ?>" alt="">
      </div>
    </div>
    <!-- / モーダルを開くボタン -->

    <!-- モーダル本体 -->
    <div class="modal__wrapper">
      <div class="modal__layer"></div>
      <div class="modal__container">

        <!-- モーダルを閉じるボタン -->
        <div class="modal__close"></div>
        <!-- / モーダルを閉じるボタン -->

        <!-- モーダル内のコンテンツ -->
        <div class="modal__content"></div>
        <!-- / モーダル内のコンテンツ -->

      </div>
    </div>
    <!-- / モーダル本体 -->

  </div>
</div>

CSSコード

CSSコードは下記のとおり。

.modal {
  padding: 80px 0;
}

/* モーダルを開くボタン */
.modal__images {
  display: flex;
  flex-wrap: wrap;
}

.modal__images .modal__image {
  position: relative;
  width: calc((100% - (32px * 2)) / 3);
  transition: opacity .6s;
}

.modal__images .modal__image:hover {
  opacity: .6;
}

.modal__images .modal__trigger {
  cursor: pointer;
}

.modal__images .modal__image:nth-child(3n - 1),
.modal__images .modal__image:nth-child(3n) {
  margin-left: 32px;
}

.modal__images .modal__image:nth-child(n + 4) {
  margin-top: 32px;
}

.modal__images .modal__image:before {
  display: block;
  padding-top: calc((2 / 3) * 100%);
  padding-top: 100%;
  content: '';
}

.modal__images .modal__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  z-index: 20;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  width: min(calc(100% - 40px), 1000px);
  max-height: calc(100% - 40px);
}

/* モーダルを閉じるボタン */
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(50, 50, 50, 1);
  cursor: pointer;
  transition: opacity .6s;
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before,
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 1px;
  background: #fff;
  content: '';
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__content .modal__image img {
  width: 100%;
}

jQueryコード

jQueryコードは下記のとおり。

// 変数に要素を入れる
var trigger = $('.modal__trigger'),
    wrapper = $('.modal__wrapper'),
    layer = $('.modal__layer'),
    container = $('.modal__container'),
    close = $('.modal__close'),
    content = $('.modal__content');

// 『モーダルを開くボタン』をクリックしたら、『モーダル本体』を表示
$(trigger).click(function() {
  $(wrapper).fadeIn(400);

  // クリックした画像のHTML要素を取得して、置き換える
  $(content).html($(this).prop('outerHTML'));

  // スクロール位置を戻す
  $(container).scrollTop(0);

  // サイトのスクロールを禁止にする
  $('html, body').css('overflow', 'hidden');
});

// 『背景』と『モーダルを閉じるボタン』をクリックしたら、『モーダル本体』を非表示
$(layer).add(close).click(function() {
  $(wrapper).fadeOut(400);

  // サイトのスクロール禁止を解除する
  $('html, body').removeAttr('style');
});