ability_yuma
4/8/2019 - 12:25 AM

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

【出典元】http://bit.ly/2Il7ifM

モーダルを表示させたとき、何も考えずにコーディングするとモーダルをスクロールしたいのに背景までスクロール れちゃう、なんてことに陥りがち。 (モーダルの上端・下端を超えるスクロールをしたときや、モーダル外にカーソルを置いてスクロールしたとき等) これを防ぐには、モーダルが表示されているときは背景要素をfixedにするのが良さげ。

hoge.php
content_copyfile_download
<div id="wrapper">
    <p class="open">
        <button>open modal</button>
    </p>
</div>
<section id="modal">
    <!--modal content -->
</section>
screen_fix.js
content_copyfile_download
// 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();
  }
} );
about
content_copyfile_download
wrapperをposition: fixed; に変えたとき、
何もしないと上端が0に戻ってしまうので、
現状のスクロール位置をスタイルのtopプロパティにあてることで
背景の位置を維持させます。

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

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