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

サムネイル JavaScript

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

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

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

 

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

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

 

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

 

スポンサーリンク

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>タグを使っていないなら不要です。

 

まとめ

モーダルの作り方の解説記事はちらほらあったのですが、背景固定のモーダルの作り方はあまりなかったので作ってみました。

実際のサイト制作でモーダルを作るならほとんどの場合背景固定が必要になると思います。

ぜひ参考にしてみてください。

 

また、jQueryを基礎から勉強したい人は以下の本がオススメです!

モーダル以外にもタブやスライドショーなど様々なコンポーネントの作り方を解説しているのでかなり参考になりました!