モーダルウィンドウの背景を固定してスクロールさせない方法

• モーダルウィンドウの背景を固定させてスクロールさせないようにしたいな…

このような疑問にお答えします！

モーダルウィンドウの背景を固定してスクロールさせない方法

モーダルウィンドウの背景を固定してスクロールさせない為のjQueryコードは下記のとおり。

$('.trigger').click(function() {

  var index = $(this).index();
  $('.wrapper').eq(index).fadeIn(400);

  // 背景を固定してスクロールさせない
  $('html, body').css('overflow', 'hidden');
  // 背景を固定してスクロールさせない

});

$('.close').click(function() {

  $('.wrapper').fadeOut(400);

  // 背景の固定を解除する
  $('html, body').removeAttr('style');
  // 背景の固定を解除する

});

モーダルウィンドウを表示している際は、『html』と『body』に『overflow: hidden;』を当てて、背景を固定しスクロールをさせないようにしております。

背景の固定を解除する際は、『removeAttr(‘style’)』を使用して、スクリプトによってHTMLに書き加えられたstyle属性を削除しております。