モーダルウィンドウのスクロール

ちょっとしたコンテンツやアラートなどをモーダルウィンドウを使って表示するのが最近では当たり前になってきました。

ウインドウ(#modal)のCSSは例えばこんな感じ。

#modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
}

fixedで固定して非表示に。
上下左右を0にすることでブロックが全画面に拡がります。

ウィンドウ内のコンテンツが少ない場合はこれで問題なし。大きくて画面に収まりきらない場合はスクロールさせることになりますが、このままだと後ろ(body)も一緒にスクロールしてしまい、スクロールバーも二重に表示されてしまいます。

この問題は、ウィンドウを表示している間はbodyをoverflow:hiddenとすることで解決できます。例えばこんな感じ。

//open
$('#btn-open').click(function(){
 $("#modal").fadeIn();
 $("body").css({overflow:'hidden'});
});
//close
$('#btn-close').click(function(){
  $("#modal").fadeOut();
  $("body").css({overflow:'visible'});
});

参考記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です