jQueryプラグインのjquery.magnific-popup.jsのオプション設定とCSSを利用して、モーダルウィンドウ表示時のフェードイン・フェードアウトの動作を実装します。
モーダルウィンドウ表示時のフェードイン・フェードアウトの動作に関わる部分以外は下記の記事と同様の実装です。
フェードイン・フェードアウトの動作はCSSのopacityとtransitionで実装します。overlayであるクラス名mfp-bgのdivタグと、クラス名mfp-wrapのdivタグ内にあるクラス名mfp-contentのdivタグ両方に設定が必要です。クラス名mfp-wrapはoverlay以外のモーダルウィンドウ全体を内包するdivタグです。クラス名mfp-bgのdivタグとクラス名mfp-wrapのdivタグは、どちらもモーダルウィンドウ表示後にクラス名mfp-ready、閉じるボタンクリック時にクラス名mfp-removingが付与されるので、それを利用してopacityとtransitionを指定します。
/* mfp-bg（overlay） */
.mfp-fade01.mfp-bg,
.mfp-fade02.mfp-bg {
opacity: 0;
transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade02.mfp-bg.mfp-ready {
opacity: 0.6;
}
.mfp-fade01.mfp-bg.mfp-removing,
.mfp-fade02.mfp-bg.mfp-removing {
opacity: 0;
}
/* mfp-content */
.mfp-fade01.mfp-wrap .mfp-content,
.mfp-fade02.mfp-wrap .mfp-content {
opacity: 0;
transition: all 0.2s ease-out;
}
.mfp-fade01.mfp-wrap.mfp-ready .mfp-content,
.mfp-fade02.mfp-wrap.mfp-ready .mfp-content {
opacity: 1;
}
.mfp-fade01.mfp-wrap.mfp-removing .mfp-content,
.mfp-fade02.mfp-wrap.mfp-removing .mfp-content {
opacity: 0;
}最後にjQueryのコードです。
オプションのremovalDelayはモーダルウィンドウが削除されるまでの秒数（ミリ秒）で、フェードアウトの動作を実装するためには必ず指定が必要です。CSSのtransitionでdurationを指定していても、removalDelayを指定しなければフェードアウトしません。mainClassのオプションは、クラス名mfp-bgのdivタグとクラス名mfp-wrapのdivタグの両方に任意のクラス名を付与することができます。
$(function() {
$('#link_category01').magnificPopup({
items: {
src: '#category01'
},
mainClass: 'mfp-fade01',
removalDelay: 200 //モーダルウィンドウが削除されるまでの秒数（ミリ秒）
});
$('#link_category02').magnificPopup({
items: {
src: '#category02'
},
mainClass: 'mfp-fade02',
removalDelay: 200
});
$('#link_category03').magnificPopup({
items: {
src: '#category03'
}
});
});