【簡単】jQueryでモーダルを作る方法【背景固定付き】

今回はjQueryを使ったモーダルの作り方を紹介します。

作りたいモーダルはこんな感じ。

ボタンクリックでモーダルがフェードイン
背景か閉じるボタンをクリックでフェードアウト
モーダル表示中は背景を固定する

背景固定とかは割とつまずきポイントですからね…自分でコード組んでみると全然思い通りにならなかったりします。

では早速紹介していきましょう！

まずはデモページからどうぞ↓背景が固定できているのも確認できます。

デモページ

HTML
CSS
jQuery
1. 表示時
2. 非表示時
まとめ

HTML

前もってjQueryを読み込むことを忘れずに！

<a href="" class="btn">クリックでモーダルを表示</a>
<div class="content">
	<div class="overlay"></div>
	<div class="modal">
		<p>これがモーダルのテキストです。</p>
		<a href="" class="modal__close">閉じる</a>
	</div>
</div>

.btn：クリックでモーダルを表示するようにします。これは<a>タグでなくても構いません。
.content：モーダル全体を囲む要素
.overlay：黒背景
.modal：モーダルの内容
.modal__close：クリックでモーダルを非表示にします。これも<a>じゃなくていいです。

.overlayは空要素で大丈夫です。

CSS

/* モーダル表示時に背景固定 */
body.fixed {
	position: fixed;
	left: 0;
}
.content {
	display: none;/* 初期状態 */
	position: fixed;
	top: 0;
	width: 100%;/* モーダルは画面いっぱいに */
	height: 100vh;/* モーダルは画面いっぱいに */
}
.overlay {
	width: 100%;/* 黒背景も画面いっぱいに */
	height: 100vh;/* 黒背景も画面いっぱいに */
	background-color: rgba(0, 0, 0, 0.5);
}
/* 配置関連。モーダル自体とは関係なし */
.modal {
	position: absolute;
	background-color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	height: 300px;
}

細かい説明はコメントにある通りです。

body.fixedはjQueryからクラスの付け外しを行います。ボタンクリック時に<body>に.fixedが付与され、背景が固定されるという感じです。<body>にposition: fixedが入ると画面全体が固定されるのでスクロールができなくなり、背景を固定することができます。

また、モーダルは最初は非表示にしておきます。これもjQueryから表示・非表示を切り替えます。

モーダル全体と黒背景は画面全体を覆う必要があるので、それぞれwidth: 100%; height: 100vh;を指定しておきます（ちなみにheight: 100%;だとダメです）

jQuery

$(function() {
	var scrollPos;//topからのスクロール位置
	$('.btn').click(function() {
		scrollPos = $(window).scrollTop();//topからのスクロール位置を格納
		$('.content').fadeIn();//モーダルをフェードイン
		$('body').addClass('fixed').css({ top: -scrollPos });//背景固定
		return false;//<a>を無効化
	});
	$('.overlay, .modal__close').click(function() {
		$('.content').fadeOut();//モーダルをフェードアウト
		$('body').removeClass('fixed').css({ top: 0 });//背景固定を解除
		$(window).scrollTop(scrollPos);//元の位置までスクロール
		return false;//<a>を無効化
	});
});

最初に変数scrollPosを宣言しておいてください。表示時のfunction()と非表示時のfunction()のどちらでも使うので、両方からアクセスできるようにしておく必要があるからです。

表示時

.btnをクリックしたら変数scrollPosにtopからのスクロール位置を格納します。

モーダルはfadeIn()でフェードインさせましょう。

次に<body>に.fixedを入れて背景を固定します。.btnをクリックした位置で固定したいので、背景を固定するtopからの位置は変数-scrollPosになります。（マイナス忘れずに！）

また、<a>タグをボタンにしている場合は最後のreturn: false;がないと<a>タグの処理が入ってしまい、意図しない挙動になります（例えば<a href=”#”>なら処理中にページの先頭に戻ってしまうなど）

<a>タグをボタンにするときは最後にreturn: false;です！

非表示時

黒背景か「閉じる」ボタンをクリック時に処理を行います。

ちなみにjQueryで2つセレクタを指定するには$('selector1, selector2')という感じでカンマで区切ります。覚えてくと割と便利（セレクタが変数の場合は使えません）。

まずモーダルをfadeOut()でフェードアウトさせます。

次に.fixedクラスを外し、背景の固定を解除します。ちなみに.css({ top: 0 })はなくても大丈夫ですが、念の為指定しておきます（変なバグの原因になったら嫌だ）。

背景の固定を解除してそのままだとページの先頭まで戻ってしまうので、$(window).scrollTop(scrollPos);で現在の位置をキープします。scrollTop()に引数を入れるとその位置まで移動してくれるので、scrollPosを渡せば現在の位置のまま背景の固定を解除できます。

最後はreturn: false;で<a>タグを無効化しましょう。<a>タグを使っていないなら不要です。