画面の上に子画面が出るjQuery ボタンのないモーダル

広告等でよく使われるjQuery。バックボタンなし

実際に動くURL

使用したJQuery

• click()
• append()
• html()
• attr()
• fadeOut()
• remove()

jQuery の コード

$(function(){
  //07_モーダル
  $('.modal07__link').click(function () {
    //要素Aの最後に要素Bを追加する
    $('.modal07__board').append('<div class="modal07__layer"></div>')
    //要素Aの最後に要素Bを追加する
    $('.modal07__board').append('<div class="modal07__photo"></div>')
    //img要素に登録する
    $('.modal07__photo').html('<img class="modal07__popPhoto">');
    $('.modal07__popPhoto').attr('src', $(this).attr('href'));
    //layer を クリックしたら元画面に戻る
    $('.modal07__layer').click(function () {
      $(this).fadeOut(function () {
	$(this).remove();
      });
    $('.modal07__photo').fadeOut(function () {
	$(this).remove();
    });
  })
  // aタグの遷移を中止する
  return false;
  });
});

HTML の コード

<div class="areaBody glcontainer frameBoard modal07__board">
  <h3 class="boardTitle">いちごまつり</h3>
  <div class="modal07__bodyNote">
    <ul class="modal07__items">
      <li class="modal07__item">
        <a class="modal07__link" href="./img/berrycake_1.jpg">
          <img class="modal07__img" src="./img/berrycake_1.jpg" alt="">
        </a>
      </li>
      <li class="modal07__item">
        <a class="modal07__link" href="./img/berrycake_2.jpg">
          <img class="modal07__img" src="./img/berrycake_2.jpg" alt="">
        </a>
      </li>
      <li class="modal07__item">
        <a class="modal07__link" href="./img/berrycake_3.jpg">
          <img class="modal07__img" src="./img/berrycake_3.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</div>

CSS の コード

.modal07 {
  &__board {
    position: relative;
  }

  &__bodyNote {
    height: 70%;
    margin-top: auto;
  }

  &__items {
    width: 80%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    gap: 15px;
    align-items: center;
  }

  &__img {
    margin: auto;
    aspect-ratio: 16/9;
  }

  &__layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
  }

  &__photo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70%;
    margin: auto;
    aspect-ratio: 16/9;
  }
}