modal

by yshrkn

HTML

<a href="#modal1" class="modalBtn">モーダル1オープン</a>
<a href="#modal2" class="modalBtn">モーダル2オープン</a>

<div id="modal1" class="modal">
  <div class="modalInner">
    <div class="modalContent">
      <div>ここにモーダルで表示させたいものをいれる。</div>
    </div>
  </div>
</div>

<div id="modal2" class="modal">
  <div class="modalInner">
    <div class="modalContent">
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, delectus! In deserunt saepe unde
        atque autem mollitia deleniti sapiente facere, obcaecati earum laudantium quidem cupiditate nihil, repudiandae
        pariatur magni! Harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, delectus! In
        deserunt saepe unde atque autem mollitia deleniti sapiente facere, obcaecati earum laudantium quidem cupiditate
        nihil, repudiandae pariatur magni! Harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis,
        delectus! In deserunt saepe unde atque autem mollitia deleniti sapiente facere, obcaecati earum laudantium
        quidem cupiditate nihil, repudiandae pariatur magni! Harum.</div>
    </div>
  </div>
</div>

SCSS

.modal {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #555;
  opacity: .5;
  display: none;
  align-items: center;
  justify-content: center;
}

.modalInner {
  position: relative;
  overflow-y: scroll;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  max-height: 90%;
  width: 80%;
}

.modalContent {
  height: 100%;
}

.modalClose {
  background: orange;
  width: 30px;
  height: 30px;
}

JavaScript

$(function(){
  var $modal = $('.modal');
  var $inner = $('.modalInner');
  var $btn = $('.modalBtn');
  var $close = $('.modalClose');
  var $currentModal = '';
  var $body = $('body');
  var isModalActive = false;

  // モーダルを開く処理
  $btn.on('click', function(event) {
    event.preventDefault();
    isModalActive = true;
    $body.addClass('is-locked');
    var target = $(this).attr('href');
    $currentModal = $(target);
    var $inner = $currentModal.find('.modalInner');
    $currentModal.css({ 'display': 'flex' }).animate({
      opacity: 1,
    }, 500);
    $('<a href="#" class="modalClose"></a>').appendTo('.modal').css({
      'position': 'absolute',
      'top': $inner.offset().top - $(this).height(),
      'left': $inner.offset().left + $inner.width(),
    });
  });

  // モーダルを閉じる処理
  $modal.on('click', function(event) {
    event.preventDefault();
    $(this).animate({
      opacity: 0,
    }, 500, function() {
      $('.modalClose').remove();
      $(this).css({ 'display': 'none' });
    });
    $body.removeClass('is-locked');
    isModalActive = false;
  });

  // コンテンツクリック時に閉じないようにする処理
  $inner.on('click', function(event) {
    event.stopPropagation();
  });

  $(window).resize(function () { 
    if (!isModalActive) { return; }
    
    var $inner = $currentModal.find('.modalInner');
    var closeBtnHeight = 30;
    var closeBtnWidth = 30;
    $('.modalClose').css({
      'top': $inner.offset().top - closeBtnHeight,
      'left': $inner.offset().left + $inner.width() - closeBtnWidth,
    });
  });
});