どうも、鳥取Web界の希望ことkuroro0319です。（ナンノコッチャ）

モーダルウィンドウってどのように作っていますか？
最近は以下のように結構JSを使わずにCSSとHTMLのみでサクッと作っちゃう人も多いんですかね？？
CSSのみでお洒落なアニメーション付きのモーダルウィンドウを作ってみた

もしくはjsで自作か、jsライブラリを使うかでしょうか？

jsで自作はカスタマイズもしやすいですし、時間に余裕があればそうした方がいいと思います。
毎回作ると作業時間もかなりかかるので、自作ライブラリ化しとく方が安全です。

とは言っても、jsの自作は結構ハードルが高いですよね。

僕もそうです。

そういうわけで、僕はjsライブラリの使用がめっちゃ多いです。

以前はColorbox.js使うことが多かったのですが、最近はもっぱらMagnific Popup.jsを使っています。

なので、今回はMagnific Popup.jsを使ったモーダルウィンドウの作成をしていきます。

まずは、Magnific Popup.jsの公式サイトに行こう

まずはMagnific Popup.jsの公式サイトに行きます。
そして、Githubのページからソースをダウンロードします。

次に、Magnific Popup.jsをサイトに設置しよう

ダウンロードしたフォルダ内のdistディレクトリ内にjquery.magnific-popup.min.jsとmagnific-popup.cssがあるので、自分のサイトの設置したいディレクトリに設置します。
その後、以下のようにheadタグ内に設置します。

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">

<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.min.js"></script>

上記は公式サイトのDocumentページからの引用ですので、内容はサイトに合わせて変更してください。

あとは、Magnific Popup.jsを設定するだけ

実際にサイトに設置できたら、あとは設定するだけです。
画像のモーダルを設定する場合なら、HTMLに「.image-link」というclassを持ったタグを設置して、jsに以下を設定します。

$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
});

画像のモーダルはこちら
jQueryのバージョンが1.9より上だと動かないみたいですね…
ちょっと残念…

他のオプションとかは公式サイトのDocumentを見ながら試してみてください。（丸投げ）

Magnific Popup.jsを試してみての感想

すごい導入が簡単なのと、シンプルなのがすごくいい！
それでいて、カスタマイズはかなりできるのもいい！
結構モーダルの理想形だったんだけど、jQueryのアップデートについていけてないみたいなので、別のを探すのが良さそう…

それでは、よいModalライフを！

参考サイト

Magnific Popup を使ってみる | Web Design Leaves

【Magnific Popup】youtubeをポップアップ表示する - Mofu