- モーダルウィンドウの背景を固定させてスクロールさせないようにしたいな…
このような疑問にお答えします!
モーダルウィンドウの背景を固定してスクロールさせない方法
モーダルウィンドウの背景を固定してスクロールさせない為の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属性を削除しております。