Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

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

index.html
<div id="wrapper">
    <p class="open">
        <button>open modal</button>
    </p>
</div>
<section id="modal">
    <!--modal content -->
</section>
main.js
// 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されてしまうので。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした