モーダルウィンドウを開いた時に背景のスクロールを固定する

webページをスマホで閲覧する際、モーダルウィンドウを開いた時に背景がスクロールできてしまうと煩わしかったりするのでそれを固定します。

ざっくり言うとJavaScript(私の場合jQuery)を使って、モーダルウィンドウを開いた時に土台の要素のスタイルを操作して固定します。

html

<div id="wrapper">
	<p id="open-modal">モーダルウィンドウを開く</p>
</div>
<div id="filter-container">
	<div id="modal-container">
		<p id="close-modal">モーダルウィンドウを閉じる</p>
	</div>
</div>

<p id="open-modal">モーダルウィンドウを開く</p>

</div>

<p id="close-modal">モーダルウィンドウを閉じる</p>

</div>

土台の要素とモーダルウィンドウの要素を兄弟要素にします。

jQuery

$('#filter-container').css({'display': 'none'});
var pointY;

$('#open-modal').click(function(){
	pointY = $(window).scrollTop();
	$('#wrapper').css({
		'position': 'fixed',
		'width': '100%',
		'top': -pointY
	});
	$('#filter-container').fadeIn(250);
});

$('#close-modal').click(function(){
		closeModal();
	});
function closeModal(){
		$('#filter-container').fadeOut(250,releaseScrolling);
	}
function releaseScrolling(){
	$('#wrapper').css({
		'position': 'relative',
		'width': '',
		'top': ''
	});
	$(window).scrollTop(pointY);
}