2020.09.25  2021.04.02

jQueryプラグイン「Magnific Popup」で簡単にモーダル画面を作成してみよう!

皆さんこんにちは!マコブログです!

今回はjQueryプラグイン「Magnific Popup」について徹底解説していきたいと思います!

「Magnific Popup」って何?

まず、そもそもMagnific Popupってなんぞや?という方向けに簡単に説明すると、

jQueryと併用することでモーダル画面が簡単に作れちゃうすごいやつなんです!



モーダル画面を自作しようとすると、cssで見た目の調整をしたり、位置の調整を細かくしたり、閉じるボタンを配置したり…。cssで調整後はJavaScriptでモーダル表示のトリガーを作って発火処理を書いて~…。と、めちゃくちゃ時間かかりますよね…。

そんなときに役立つのが「Magnific Popup」なんです!

使用しているサイトもかなり多く見かけるので、モーダル画面作成の依頼などが来たら是非使ってみてください!

必要なファイルは下記URL(GIT)からダウンロード↓

https://github.com/dimsemenov/Magnific-Popup

Magnific Popupを実際に使ってみる

使用方法については、自分が検証した限りだと大きく二つに分けられそうでした!

まず一つ目は、「モーダル画面内に画像のみを表示する方法」と、

そして二つ目は、「モーダル画面内にテキストや画像などを混合させて表示させる方法」です!

そして忘れてはならない注意点が!

※必ずjQueryを読み込んでから「Magnific Popup」を読み込むようにすることです!

また、Magnific Popupは、「magnific-popup.min.js(jsファイル)」と「magnific-popup.css(cssファイル)」の二つが必要になりますので、使用前は必ず読み込んでおいてくださいね!

読み込み方法がわからないよ…。という方は下記サイトを参考にしてください!

https://www.pc-koubou.jp/magazine/27439

それではまず、モーダル画面に写真のみを表示する方法をご紹介していきたいと思います。

手順は以下の2つだけ!



1.サイト内で使用しているjsファイルに下記を記述します。

$('.test-popup-link').magnificPopup({ type: 'image' })

2.jsファイルへの記述が完了したら、次はHTMLファイルに下記を記述しましょう。

<a class="test-popup-link" href="モーダル表示させたい画像のリンク">
<div><img src="モーダルのトリガーとなる画像のURL"></div>
</a>

行う作業はこれだけです!これで画像をモーダル表示させる方法は完了しました。

次はモーダル画面内にテキストや画像などを混合させて表示させる方法について解説していきます。



こちらも手順は以下の2つだけ!

1.サイト内で使用しているjsファイルに下記を記述します。

$('.popup-modal').magnificPopup({
      type: 'inline',
      preloader: false
    })

2.jsファイルへの記述が完了したら、次はHTMLファイルに下記を記述しましょう。

<a class="popup-modal" href="#inline-wrap">施術の詳細</a>
<div id="inline-wrap" class="mfp-hide">
表示したい内容
</div>

※mfp-hideはtype: “inline”;の時に表示する内容をあらかじめ非表示にするためのクラスですのでつけるのをお忘れなく!

これで中身が画像とテキストのモーダル画面の表示方法は完了です!

いかがでしたでしょうか?

モーダル画面を1から作る労力と比べたら格段にMagnific Popupのほうが楽ですよね!?

今回の内容が一人でも多くのWEB制作者の助けになれば幸いです!



Magnific Popupについて別の使用方法紹介のサイトは下記URL↓

https://qiita.com/katsunory/items/cf0e0647204ada26ece0

こちらの記事も是非チェックしてみてください↓
テキストアニメーションができる。jquery プラグインのtextillateを紹介

※追記

ポップアップの際、背景と表示する要素は別で出てきます。

背景は「mfp-bg」というクラス名、表示内容は「mfp-wrap」というクラス名です。

この時、必ずz-indexはmfp-bg<mfp-wrapの関係にしてください。

↑↑↑↑↑
これを逆にしてしまうと背景の後ろに表示したい内容が隠れてしまいます。

また、mfp-wrapの中身(表示したい要素  例)iframeとか…)にz-indexをいくらつけても無駄です。「mfp-wrap」本体にz-indexをつけてください。

あなたにオススメの記事
マコブログ
Makoto
高校卒業と同時にプログラミングを学習しはじめ、今年で4年目になります。
普段はフロント周りで作業をしていて、WordPressの開発とSEO対策には自信があります。
マコブログでは、プログラミングやSEO対策についての情報を発信しています。

よく読まれる記事

S&P500研究所

【マコブログ 2nd】S&P500研究所がOPENしました!!

Read More →