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

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

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

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

left open btn



contents

body._fixed {
 position: fixed;
}
.left-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;
}



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

jquery使用

$(function(){

  var scrollPosition;

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

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

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

});