Magnific Popupの使い方をサンプルコード付きで解説！
Magnific Popupの使い方をサンプルコード付きで解説します。Magnific Popupの使うことで簡単にレスポンシブに対応したポップアップウインドウ（モーダルウインドウ）を作成することができます。
Magnific Popupとは？
「Magnific Popup」はjQueryのプラグインであり、用いることで簡単にレスポンシブに対応したポップアップウィンドウ(モーダルウィンドウ）を作成することができます。
Magnific Popupの導入方法
まず始めにMagnific Popupの導入方法について順番に紹介します。
jQueryの導入方法
こちらのサイトを見て一番最新のminifiedされたCDNをコードの方に貼り付けていただけるといいと思います。
現在の最新は下記となっています。
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>本家よりもGoogleのCDNを使用したい場合
なんらかの理由で本家よりもGoogleのCDNを使用したい場合には上記のサイトを参照してください。
現在の最新は下記となっています。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>Magnific Popupの導入方法
まず上記のページでjquery.magnific-popup.min.jsとmagnific-popup.cssをダウンロードもしくはコピーしてください。
そして次にCSSとJSをそれぞれ読み込むためのコードに貼り付けます。
CSS
CSSの読み込みコードはこちらになります。
<link rel="stylesheet" href="magnific-popup.css" />JS
JSの読み込みコード（※jQueryの読み込みの後に記述してください）はこちらになります。
<script src="jquery.magnific-popup.min.js"></script>Magnific Popupの使い方
それでは画像をポップアップウィンドウとして表示させる方法について紹介します。
まずサンプルコードを用いて挙動を見てみましょう。
このようにポップアップで画像が表示されていることが分かります。
では簡単にコードの解説を行います。ポップアップさせたい画像をaタグのhref属性に設定して、class属性で適当な名前を設定します。
そして次にjQueryの方で、classに対してmagnificPopupメソッドで中にオプションを記述します。
Magnific Popupを用いることで簡単にポップアップウィンドウが作成できることが分かります。
アニメーションさせる方法
Magnific Popupではポップアップが開かれた後「mfp-ready」クラスが追加され、ポップアップが閉じるときは「mfp-removing」が追加されてから、削除されます。
こちらを利用してcssアニメーションをつけることができます。
このようにフェードしてポップアップウィンドウが表示されていることが分かります。
では簡単にコードの解説を行います。
まずはCSSから簡単に解説します。
mfp-bgは画像部分、mfp-wrapは画像周りの黒い背景となります。それぞれ初期値はopacityを0とし、ポップアップが開かれた後mfp-ready、ポップアップが閉じるときのmfp-removingにそれぞれopacityを設定します。
そしてtransitionプロパティでアニメーションさせます。
この時、jQueryの方でremovalDelayの設定をしないと、ポップアップが閉じる時にすぐポップアップコンテンツが削除されてしまいアニメーションにならないため、removalDelayを適当な値に設定します。
これでアニメーションを作成できます。
まとめ
いかがでしたでしょうか？
ここで紹介した以外にMagnific Popupは様々なカスタマイズを行うことができます。
下記にそのカスタマイズの種類や適用させる方法が載っているサイトを載せておきます。
ぜひMagnific Popupを用いてポップアップウィンドウを作成してみてください。
