今回は画像はもちろん、動画、webページ、インラインなにがきても対応できる万能プラグイン【Magnific Popup】をサンプル付きでご紹介します。
- Magnific Popupとは
- Magnific Popup基本的な使い方
- 画像(gallery)形式のポップアップ
- inline形式のポップアップ
- YouTube、Googleマップのポップアップ
- 内部HTMLファイルのポップアップ
- Magnific Popup cssアニメーションについて
- まとめ
Magnific Popupとは
公式サイト:
https://dimsemenov.com/plugins/magnific-popup/
ソースは少し古いですが自分が一番最初に出会った万能モーダル系プラグインです。 画像、動画、HTMLファイルなどのポップアップ対応、複数設置可能でレスポンシブ、IE11も対応しています。
ただポップアップ時のアニメーション設定がちょっとわかりずらかったのでそこも含めご紹介します。
Magnific Popup基本的な使い方
GitHub からmagnific-popup.cssとjquery.magnific-popup.jsを取得して読み込みます。
<link href="css/magnific-popup.css" rel="stylesheet" type="text/css">
<script src="js/jquery.magnific-popup.js"></script>
jsの設定は基本的に以下のような形になります。
<script type="text/javascript">
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline', //image,inline,iframe(YouTube・Googleマップ),ajax(HTMLポップアップ)
mainClass: 'mfp-fade', //アニメーションのクラスを設定する
removalDelay: 600, //ポップアップを閉じる際のフェードアウト時間
preloader: true, //リンク切れの際のエラー表示
disableOn: 700, //700px以下でリンクにする
fixedContentPos: false //trueはポップアップがposition:fixedに、falseはposition:absoluteに
});
});
</script>
画像のポップアップ
複数の画像をギャラリー形式で表示することができます。
Titleの設定もできます。
HTML
<div class="wrap_content case_img popup-gallery">
<a class="btn" href="img/magnific_img01.jpg" title="Title img01">img01</a>
<a class="btn" href="img/magnific_img02.jpg" title="Title img02">img02</a>
<a class="btn" href="img/magnific_img03.jpg" title="Title img03">img03</a>
</div><!-- wrap_content -->
JS
<script type="text/javascript">
$(document).ready(function() {
$('.popup-gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-fade',
removalDelay: 600,
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title') + '<small>by UHAHA</small>';
}
}
});
});
</script>
inlineのポップアップ
href=”#XXXX”で指定したidの要素をモーダルで表示させます。
type:は’inline‘に設定します。
HTML
<a class="btn popup-modal" href="#modal_test">inline</a>
<div id="modal_test" class="mfp-hide white-popup-block">
<h1>Modal test</h1>
<p>インラインテキストテスト</p>
<p><a class="popup-modal-dismiss btn" href="#">CLOSE</a></p>
</div>
JS
<script type="text/javascript">
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
mainClass: 'mfp-fade',
removalDelay: 600
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});
</script>
YouTube、Googleマップのポップアップ
type: ‘iframe‘で設定します。
Googleマップで設定するURLは Googleマップ の共有リンクだと表示されませんでしたのでURLは以下の書き方で設定します。
https://maps.google.co.jp/maps?q=loc:35.XXXX,139.XXXX&iwloc=A
HTML
<a class="btn popup-youtube" href="https://www.youtube.com/watch?v=w2iPKMP2a-U">YouTube</a>
<a class="btn popup-gmaps" href="https://maps.google.co.jp/maps?q=loc:35.649679,139.720945&iwloc=A">Googleマップ</a>
JS
<script type="text/javascript">
$(document).ready(function() {
$('.popup-youtube, .popup-gmaps').magnificPopup({
disableOn: 480,//700pxでポップアップせずYouTubeへリンクする
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
</script>
内部HTMLファイルのポップアップ
同じサイト内のHTMLファイルをポップアップします。
HTML
<a class="btn simple-ajax-popup" href="ajax_sample.html">ajax</a>
JS
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
Magnific Popup cssアニメーションについて
Magnific Popupはポップアップ時にフェードインなどのアニメーションをしたい場合、cssを別途設定し、removalDelayでポップアップを閉じるときにディレイをかけます。
JS(mainClassを設定)
<script type="text/javascript">
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
mainClass: 'mfp-fade',
removalDelay: 600
});
});
</script>
CSS(フェードのクラスを作成)
.mfp-fade.mfp-bg{
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing{
opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content{
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content{
opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content{
opacity: 0;
}
※デモではすべてにフェードアニメーションを設定しています。
まとめ
他のプラグインでも複数設置やiframe対応可能なものも多いけど正直jsの対応がめんどくさいなという印象でした。
また、当初のサイト計画では単一のモーダルウィンドウの設置を予定していたのに複数設置にになった、外部サイトのポップアップもしたい、などと仕様が変更になった場合でも1つのプラグインで対応できます。
また、現時点のjsプラグインの選択は結局のところIE11で動いてレスポンシブ対応であることがまだ重要なのかなと思いました。
関連記事
【Modaal】画像、動画、HTMLなんでもポップアップしてくれるモーダル系jQueryプラグインの使い方
【jQuery】簡単に実装できる時短モーダルウィンドウ「Remodal」

当時は最強Magnific PopupとおもっていたけどやはりModaalですね~
Can I simply just say what a comfort to find someone that truly knows what they are discussing on the net. You certainly know how to bring an issue to light and make it important. A lot more people really need to check this out and understand this side of your story. I was surprised that you aren’t more popular given that you most certainly have the gift. Jada Clerc Moreen
gallery形式のhtmlの記述の img01
のimg01をphotoF/P1.jpg,img02をphotoF/P2.jpg,img03をphoto03をphotoF/P3.jpgに設定していますが
<a class="btn" href="img/magnific_img01.jpg" この部分の記述が分かりません。とりあえずこのままの設定で
動かすとP1.jpgの画像がエラー表示されます。当然でしょうが正常に動作するにはどの様に記述すればよいかコメント頂ければ幸いです。当方、自分のHPを作成している初心者です。よろしくお願いします。
お返事遅く無し申し訳ありません。
当サイトサンプルでいう黒いボタン部分を画像にする感じでしょうか。
ボタンのテキスト部分にimgタグで設定すると。サムネイル形式のボタンになります。
<a href="photoF/P1.jpg" title="Title img01" rel="nofollow ugc">
<img src="photoF/P1.jpg" alt="">
</a>