MODAL --fix modal

index.html

<a href="" class="p-top_lineup_list_btn c-btn01 js-modal-btn">購入する</a>
            <div class="c-modalArea js-modal-box">
              <ul class="c-shopNavi">
                <li><a href="" target="_blank"><img src="/brand/muko/img/shopbtn02.png" alt="ケンコーコムで購入はこちら"></a></li>
                <li><a href="" target="_blank"><img src="/brand/muko/img/shopbtn03.png" alt="爽快ドラッグで購入はこちら"></a></li>
                <li><a href="" target="_blank"><img src="/brand/muko/img/shopbtn04.png" alt="楽天で購入はこちら"></a></li>
              </ul>
            </div>

modal-fix-modal.markdown

MODAL --fix modal

A Pen by atos on CodePen.

License.

script.js

//モーダル
  var modalBtn = $('.js-modal-btn');
  var modalBox = $('.js-modal-box');
  var overLay = $('#overlay');
  modalBtn.on('click', function() {
    $('body').append($('<div id="overlay"></div>').fadeIn('fast'));
    $(this).next(modalBox).addClass('is-show').fadeIn('slow');
    if(modalBox.hasClass('is-show')){
      $(document).on('click touchend', function(e) {
        if (!$(e.target).closest(modalBox).length) {
          modalBox.removeClass('is-show').fadeOut();
          $("#overlay").fadeOut().remove();
        }
      });
    }
    return false
  });

style.scss

.c-modalArea{
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  width: 800px;
  margin: auto;
  z-index: 5;
  transform: translateY(-50%);
}
#overlay{
  transition: .4s;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 4;
  background: rgba(#000,0.4);
  cursor: pointer;
}
.c-shopNavi {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #3eb8ec;
  padding: 35px 66px;
  border-radius: 10px;
  background-color: #fff;
  
  a {
    display: block;
    border: 1px solid #f0f0f0;
    
    &:hover{
    opacity: .7;
    }
  }
  li{
    &:nth-child(n+4) {
      margin-top: 16px;
    }
    &:not(:nth-child(3n-2)){
      margin-left: 14px;
    }
  }
}