上から出てくるモーダルのサンプルコード

上から出てくるモーダルのサンプルです。
メインの要素の他に、透明な黒背景と、ちょっと遅れて表示される閉じるボタンがあります。

モーダル上でスクロールしても下の要素はスクロールしないようになっています。

See the Pen 上から出てくるモーダル by takapen (@takapen) on CodePen.

top open btn




  contents

body {
  height: 5000px;
  background: #ccc;
}
body._fixed {
 position: fixed;
}
.top-open__area {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  display: none;
}



.top-open__area--main {
 width: 100%;
 height: 100%;
  margin-top: -1000px;
 background: #ffe7e7;
 position: fixed;
 top: 0;
  left: 0;
 overflow-x: scroll;
}
.top-open__btn--close {
  display: none;
}
.top-open__btn--close:after {
  content: "";
  width: 35px;
  height: 35px;
    background: #ccc;
  position: absolute;
  top: 4px;
  left: 262px;
}

jquery使用

$(function(){

  var scrollPosition;

  $('#js-top-open__btn').on('click touched', function(){
    scrollPosition = $(window).scrollTop();
    $('body').addClass('_fixed').css({'top': -scrollPosition});
    $('#js-top-open__area').fadeIn(100);
    $('#js-top-open__area--main').animate({'marginTop':'0'},300);
    setTimeout(function(){
      $('#js-top-open__btn--close').fadeIn(100);
    },400);
  });

  $('#js-top-open__btn--close').on('click touched', function(){
    $('body').removeClass('_fixed').css({'top': 0});
    window.scrollTo( 0 , scrollPosition );
    $('#js-top-open__btn--close').fadeOut(100);
    setTimeout(function(){
    $('#js-top-open__area--main').animate({'marginTop':'-1000px'},300);
    },200);
    setTimeout(function(){
      $('#js-top-open__area').fadeOut(100);
    },400);
  });

  $('#js-top-open__area--main').on('click', function (e) {
    e.stopPropagation();
  });

});