[jQuery]背景クリックで閉じる&スクロール有りのモーダル画面を作る

jQuery・CSSを使ってモーダル画面を作る

モーダル画面とはボタンを押すと画面いっぱいにコンテンツが表示され、ユーザーの意識や操作をそちらに意識させる際に便利な画面です。

サイトによってはポップアップ画面とも呼ばれていますが、「モーダル」「ポップアップ」それぞれ意味が異なってくるようです。

モーダル：閉じるまで元の画面に戻れない
例・ハンバーガーメニュー
ポップアップ：自動的に表示される
例・広告、確認画面

今回作るものはモーダル画面かつ、ユーザビリティを考慮しボタン以外にも背景をクリックするだけで閉じることのできるものを作りたいと思います。

また、コンテンツが縦長になった場合も考慮し、スクロールできるようにもしたいと思います。

以下、参考にさせて頂いたサイト様です。
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る

See the Pen by nanase webdesigner (@nanase-777) on CodePen.

モーダル画面を用意
jQueryで表示切り替え

モーダル画面を用意

.modalで画面いっぱいにコンテンツを表示するベースを作ります。

モーダル画面内のコンテンツ以外は選択できないことを示すためにも、.modal-bgで背景を暗くします。

そして.innerに表示させたいコンテンツを格納します。.innerは次のコードを記載することで、基準である.modalに対して中央に表示されるようになっています。

CSS

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

またコンテンツが長くなった場合、内容が.innerからはみ出てしまうのを防ぐ必要があります。そこでoverflow-y: scroll;を追記することでスクロールバーが自動的に表示されるように対応しました。
滑らかなスクロール（慣性スクロール）とするために-webkit-overflow-scrolling: touch;を追加しています。

最後に、モーダル画面をdisplay: none;で非表示にしておきます。

jQueryで表示切り替え

HTMLソースに.js-btn-modalというクラスがあると思います。デザインを整える通常のCSSクラスとは異なり、jQueryで制御するためのクラスということで頭に「js」を付けて区別しています。

そして.js-btn-modalというクラスを持った要素（ここでは開閉ボタン・モーダル画面の背景）をクリックするとモーダル画面が開閉するという仕組みにしています。

$('.js-btn-modal').on('click', function () {
　　$('.modal').fadeToggle();
});

$('.js-btn-modal').on('click', function () {

　　$('.modal').fadeToggle();

});

`fadeToggle`関数

fadeToggle([duration] [,easing] [,callback])

フェード処理での表示・非表示切り替え処理を行う

引数	説明
duration	アニメーションのスピード。`"slow"、"normal"、"fast"`、もしくはミリ秒単位（`"1500"`など）でアニメーション完了までの時間を指定。`fast=200、normal=400、slow=600`ミリ秒となっている。指定のない場合は`normal`が設定される。
easing	アニメーションの変化の種類を指定。デフォルトの`'swing'`と、一定のペースで変化する`'linear'`が指定可能。さらに複雑なアニメーションの場合はプラグインjQuery UI が必要。
callback	アニメーションが完了した際に呼び出される関数を指定可能。