自作モーダルメモ

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