自作モーダルメモ

時々モーダルのライブラリで不具合出たりして使えないことがあるので、超簡単モーダル自作のやつを備忘録で置いておきます。
jqueryです。

とりあえずなので変な部分あります。

js

javascript

var current_scrollY;

function modalOpen() {
    current_scrollY = $(window).scrollTop();
    $('body').attr('data-modalActive', 'true');
    $('body').css({
        position: 'fixed',
        top: -1 * current_scrollY,
        'zIndex': 10
    });
    $('html').prop({ scrollTop: 0 });
}

function modalClose() {
    $('body').removeClass('menu-open')
    $('body').attr('data-modalActive', 'false');
    $('body').css({
        position: 'relative',
        top: 'auto'
    });
    $('html').prop({ scrollTop: current_scrollY });
    return;
}
function modalToggle() {
    if($('body').attr('data-modalActive')=='true'){
        modalClose();
    }else{
        modalOpen();
    }
}

$(function(){
  $('.modal-open').on('click', function (e) {
    e.preventDefault();
    $($(this).attr('href')).fadeIn();
    modalOpen();
  });
  $('.modal-close').on('click', function () {
    $('.modal').fadeOut();
    modalOpen();
  });
})

scss

scss

.modal{
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  z-index: 99999;
  &__wrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 80px 20px;
    height: 100%;
  }
  &__inner{
    width: calc(100% - 40px);
    max-width: 800px;
    background-color: #fff;
    margin: 80px auto;
    overflow-y: scroll;
    @include mq(md, max){
      margin: 40px auto;
    }
  }
}