モーダルウィンドウと言えばLightboxなどの有名なプラグインを使用しても実装可能ですが、今回はプラグインを使わずに実装する方法をご紹介します。
ただ個人的にはMicromodal.jsというライブラリを使った方がいいと思っています(実務でもこちらを使っています)
Micromodal.jsを使う方法については以下の記事を参照下さい。
Micromodal.jsの使い方【モーダルウィンドウを簡単に実装できるライブラリ】
続きを見る
また今回はjQueryを使うので、jQuery本体の読み込みを忘れないようにしましょう。
jQueryの使い方はこちらの記事を参照下さい。
【初心者向け】jQueryとは?CDNを使った本体の読み込み方も分かりやすく解説
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
モーダルウィンドウとは?
まずモーダルウィンドウについて軽く説明します。
モーダルウィンドウとは、ボタンなどをクリックしたら別ウィンドウで最前面に表示されるものです。
ポップアップと似たようなものですが、ポップアップは前面に目立つように表示されるだけでスクロールや別の操作が出来るのに対し、モーダルウィンドウは表示を閉じるまで他のウィンドウを開くことが出来ません。
今回はボタンをクリックしたら画像が表示されるようなモーダルウィンドウを作ってみたいと思います。
早速ですがこちらが今回作るモーダルウィンドウのデモになります。
スクロールしていくと表示される『トイプードル』というボタンがあるのでクリックして下さい。
See the Pen
モーダルウィンドウ by junpei (@junpei-sugiyama)
on CodePen.
『閉じる』ボタンか薄暗い背景をクリックすると画像は非表示になります。
jQueryを使って背景をクリックしても閉じるモーダルウィンドウの作り方
それでは順番にコードを解説していきます。
コード解説
まずはHTMLから見てみます。
<body>
<main>
<section class="about">
<p>ここにABOUTテキストが入ります。</p>
</section>
<div class="btn">
<a class="btn__link js-modal-open" href="">ハリネズミ</a>
</div>
<div class="modal js-modal">
<div class="modal__overlay js-modal-close"></div>
<div class="modal__content">
<img src="画像のパス" />
<p><a class="js-modal-close" href="">閉じる</a></p>
</div>
</div>
</main>
</body>
今回作るモーダルウィンドウはオープン時に背景をスクロールさせないようにするため、スクロール出来るような長さになるようにsectionを入れています。
<div class="modal__overlay js-modal-close"></div>
はモーダルウィンドウの薄暗い背景で、ここをクリックしても閉じるようにしたいので、ここにも閉じるためのclassである.js-modal-close
を付けています。
CSSはモーダルに関係する部分だけ書きます。
.btn {
margin: 0 auto 200px;
width: 100px;
}
.btn a {
background-color: #fffacd;
color: #222;
font-size: 16px;
padding: 10px;
text-align: center;
text-decoration: none;
}
.modal {
display: none;
height: 100vh;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.modal__overlay {
background: rgba(0, 0, 0, 0.8);
height: 100vh;
position: absolute;
width: 100%;
}
.modal__content {
background: #fff;
left: 50%;
padding: 10px;
position: absolute;
text-align: right;
top: 50%;
transform: translate(-50%, -50%);
max-width: 200px;
width: 100%;
}
.modal__content img {
max-width: 200px;
width: 100%;
}
.modal__content p {
background-color: #eee;
display: inline-block;
font-size: 16px;
}
.modal__content a {
color: #000;
padding: 5px 10px;
text-align: right;
}
.fixed {
height: 100%;
position: fixed;
width: 100%;
}
.modal
が実際に開く部分で、最初はdisplay: none;
にして非表示にしておきます。
これはjQueryで表示非表示をコントロールします。
.fixed
は背景を固定させるためのCSSで、モーダルウィンドウを開いた時にjQueryを使ってbodyに付与します。
最後にjQueryです。これはモーダルウィンドウと背景固定で分けています。
// モーダルウィンドウ
$(function () {
$(".js-modal-open").on("click", function () {
$(".js-modal").fadeIn();
return false;
});
$(".js-modal-close").on("click", function () {
$(".js-modal").fadeOut();
return false;
});
});
// モーダルウィンドウオープン時の背景固定
$(function () {
let scrollPosition;
$(".js-modal-open").on("click", function () {
scrollPosition = $(window).scrollTop();
$("body").addClass("fixed").css({ top: -scrollPosition });
});
$(".js-modal-close").on("click", function () {
$("body").removeClass("fixed").css({ top: 0 });
window.scrollTo(0, scrollPosition);
});
});
.js-modal-open
が付いているボタンをクリックすると.js-modal
が表示され、.js-modal-close
をクリックすると非表示になります。
.js-modal-close
は『閉じるボタン』と『薄暗い背景』になります。
背景固定については.js-modal-open
が付いているボタンをクリックするとbodyに.fixed
で書いたプロパティが反映され、背景が固定されます。
そして『閉じるボタン』か『薄暗い背景』をクリックすれば固定も解除されます。
それではもう一度完成形を見てみましょう。
See the Pen
モーダルウィンドウ by junpei (@junpei-sugiyama)
on CodePen.
画像が表示されたら背景のスクロールもされないようになっているのが確認出来ると思います。
まとめ
今回は背景をクリックしても閉じるモーダルウィンドウの作り方を解説しました。
ただし冒頭でも書いた通り、Micromodal.jsを使う方がおすすめです。
Micromodal.jsの使い方【モーダルウィンドウを簡単に実装できるライブラリ】
続きを見る
以上になります。