text モーダルを表示したときに背景部分はスクロールできないようにする

Posted 2021-04-29

<div id="wrapper">
    <p class="open">
        <button>open modal</button>
    </p>
</div>
<section id="modal">
    <!--modal content -->
</section>

// include jQuery

var current_scrollY;

// OPEN MODAL
$( '.open button' ).on( 'click', function(){
  current_scrollY = $( window ).scrollTop(); 

  $( '#wrapper' ).css( {
    position: 'fixed',
    width: '100%',
    top: -1 * current_scrollY
  } );

  $( '#modal' ).show();

} );

// CLOSE
$( '#modal' ).on( 'click', function( e ){
  if ( e.target.tagName.toLowerCase() === 'section' ){
    $( '#wrapper' ).attr( { style: '' } );
    $( 'html, body' ).prop( { scrollTop: current_scrollY } );

    $( this ).hide();
  }
} );

wrapperをposition: fixed; に変えたとき、
何もしないと上端が0に戻ってしまうので、
現状のスクロール位置をスタイルのtopプロパティにあてることで
背景の位置を維持させます。

また、モーダルを閉じる際には、style指定をリセットすることでfixedを解除させます。
更に、スクロール位置が0に戻ってしまっているので、開くタイミングで保持しておいた値まで移動させましょう。

気をつけるべき点としては、背景要素とモーダル要素を兄弟関係に配置することです。
親子にしてしまうと、モーダルまでfixedされてしまうので。