こんにちは！けーすけです！
飲み会やらなんやらで予定通り更新できない日が続いておりました。。。そんな時でも投稿できるように、予約投稿できるように記事を書き溜めておかなければ。。。
そんなことはさておき、今回は私がよく使うモーダルウィンドウ系プラグイン( lightbox系 )の「Magnific Popup」について書きたいと思います！
div要素ごとモーダルにできるので、テキストや画像までまとめて出来ます！
私のよく使う形のみの紹介になりますので、詳しい使い方に関しての配布元のgithubを参考にしてください。

Magnific Popupのダウンロード元と使うファイル

配布元のgithubからファイルをダウンロードしてください。緑のボタンからダウンロード！
ダウンロードしたファイルを開くと、下の画像のようになっています。

jQueryとHTMLの記述

こんな感じになります。
[codepen_embed height=”182″ theme_id=”0″ slug_hash=”dNjgew” default_tab=”js” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/dNjgew/’>ブログ埋め込みよう</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]

• delegate　　クリックされる要素のクラス名
• type　　ここでどんな形式で表示するか指定。今回はinline
• src　　モーダル表示したい要素のid名
• closeBtnInside　　閉じるボタンの表示/非表示

簡単なオプションはこんな感じで終わりです。
HTMLの表記は下のようになります。
[codepen_embed height=”186″ theme_id=”0″ slug_hash=”dNjgew” default_tab=”html” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/dNjgew/’>ブログ埋め込みよう</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
クリックされるa要素のクラス名を、delegateのオプションに指定。
モーダル表示する要素には、srcになるid名と、「mtf-hide」というクラス名を必ずつける！このクラス名をつけないと動かないのでご注意を！
ここまででモーダル表示の動作はできるはずです。もしできない場合は、「mtf-hide」のクラス名をつけている部分には他のクラス名をつけないでやってみてください。

複数箇所使う時と、閉じるボタンを追加する方法

ここまでだと、他のサイトと同じことを書いてしまっているかもしれませんがここからは個人的によく使う！と思う内容です。
まずは、1ページ内で複数箇所使う場合の処理をする場合。
特別な処理はせずに、「クリックしたら」で単純にわける。JavaScriptを勉強し始めたばかりだとこういうのが一番欲しい情報だったりしますよね！( 経験談 )
[codepen_embed height=”212″ theme_id=”0″ slug_hash=”QdBJbg” default_tab=”js” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/QdBJbg/’>ブログ埋め込みよう</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
 
つぎに閉じるボタンを追加する記述がこちら
[codepen_embed height=”280″ theme_id=”0″ slug_hash=”bgjQEq” default_tab=”js” user=”Chankei”]See the Pen <a href=’http://codepen.io/Chankei/pen/bgjQEq/’>ブログ埋め込みよう</a> by Chankei (<a href=’http://codepen.io/Chankei’>@Chankei</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]
後半の$(document~から始まる記述の、「.popup-closebtn」こちらを閉じるボタンにしたい部分に追加するとアッとゆう間に閉じるボタンに大変身です！
デフォルトの閉じるボタンや、この方法で追加した閉じるボタンはcssで簡単に見栄えを整えることができるので便利です。

まとめ

一回使ってみると、とっても簡単で使い易いのでおすすめです！
画像だと、lightboxを使うなど用途に応じてプラグインを使い分けるのがおすすめです。今回のように要素をまとめてモーダルにする時は「Magnific Popup」がよいですね。
cssを扱う際に反映されない時は、階層をつなげずに書いてみてください。
それでは駆け足ですが今回はこの辺で。けーすけでした。