最近、いろいろなモーダルウィンドウがありますが、最近はよく「Magnific Popup」を使っています。状況によっては、「colorBox」「FancyBox」も使いますが最近は、MagnificPopupを使うことがおおいです。
そして、WordPressのPluginもあるようなので、簡単にそっちでも使えるのかも。。

モーダルウィンドウとは

さて、モーダルウィンドウとなんか、知ったかぶりの人みたい最近よくいいますが、そもそもモーダルウィンドウってなによ！ってことに気がついた。ってなわけで

タララタッタラーン！ウィキペディアー（ドラ◯もん風）

モーダルウィンドウ（英: Modal window）は、何らかのウィンドウの子ウィンドウとして生成され、ユーザーがそれに対して適切に応答しない限り、制御を親ウィンドウに戻さないユーザインタフェース設計になっているもの。モーダルウィンドウはGUIシステムで、ユーザーに注意を促したり、緊急の状態を知らせる目的でよく使われる。

まぁ、ウィンドウから子ウィンドウを生成してユーザーに特に見てほしい対応してほしいことを強調して見せてなんか操作してくれないと親ウィンドウには戻れませんよ！的なことでしょうか。そういうことなんでしょうね。

その他のモーダルなんちゃら

上でも言っている通り、モーダルウィンドウはMagnificPopup以外にもcolorBox、FancyBoxなど、まだまだいっぱいあります。

では、そのいっぱいあるので代表的なものを紹介したいと思います。

ベーシックな

Lightbox2
http://lokeshdhakar.com/projects/lightbox2/

 

 

誰もがよく知る代表ですよね。
モーダルウィンドウのことをLightBoxってずっと言ってました。

 

Slimbox2
http://www.digitalia.be/software/slimbox2/

 

LightBoxの開発者がつくったjQueryベースの軽量なものだそうです。
どれぐらい軽量なのでしょうか。一回つかってみよーっと

FancyZoom
http://www.cabel.name/2008/02/fancyzoom-10.html

 

ズームする動きが気持ちよくて使ってました。

HTMLの表示ができる

ColorBox
http://www.jacklmoore.com/colorbox/

 

多種多様な要望がでてきて探しまくった結果、使いやすくカスタマイズがし易いのでこれを使い始めました。たくさんのテーマが元からありそこから選択することでいろいろと楽に使用ができます。

ThickBox
http://codylindley.com/thickbox/

 

同僚が使っているので使ってみた。
Simpleに使えてマルチ機能なPluginです。

learnModal
http://leanmodal.finelysliced.com.au/

今回のことで調べてみたところ見つかったもの軽快な動きで結構気に入りました。
難しいことをしなくて良さそうなときに一度使ってみるメモ。

 

レスポンシブ対応

Fancybox1
http://fancybox.net/

レスポンシブの対応やいろいろと進化する昨今、それに対応しまくってくれていると信じているPlugin。
オプションがたくさんあり、カスタマイズ性は抜群です。

Fancybox2
http://fancyapps.com/fancybox/

正直なところ１と２の違いがよくわからず、２を使うと使えないオプションがあったので１でやっちゃう。いつかは２をちゃんと解析しなくちゃ・・・

Fresco
http://www.frescojs.com/

なんかギャラリーないずされたPlugin。使用したことはないが雰囲気良かったので、機会があったら使ってみよう。レスポンシブもいい感じで対応されているようで安心です。

Photo Swipe
http://photoswipe.com/

こちらも使用したことはないがレスポンシブ、スマホにすごく最適なのではと思った。
モーダルで開いた画像がガッツリ拡大できます。
小さな画面で見ている時には使いやすいのではないかと思います。

 

Magnific Popupってどんなのよ。

長々と、講釈をたれてもよくわかりませんよね。
ですので実際に使ってみようかと思います。

公式サイト
http://dimsemenov.com/plugins/magnific-popup/

ダウンロードファイルはgithubから
https://github.com/dimsemenov/Magnific-Popup

ダウンロードしてきたファイルを任意の場所に移し、JavaScriptやCSSへのパスを通してあげる。
そして、リンクに、クラスを仕込み
そのクラスをJavaScriptにて動作させる。
はい簡単！ってわかりません・・・よね・・・

JavaScriptやCSSへのパスを通す
jQuery使っているのでjQueryも忘れずに

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src=“≪設置した任意の場所≫/jquery.magnific-popup.min.js”>
<link href="≪設置した任意の場所≫/magnific-popup.css" media="all" rel="stylesheet">

 

リンクにクラスを設置

ポップアップさせたいリンクに共通でクラスを設置

<a href=“≪ポップアップ表示させたい画像≫” class=“popup”>≪サムネイル画像やリンクテキスト≫</a>

 

JavaScriptの設定

<script>
;jQuery(function($){

 $(‘.popup’).magnificPopup({
 type: "image"
 }); }); </script>

まぁ、標準的な設置の流れはこんなかんじです。
するとこんな感じになります。

See the Pen MagnificPopup_demo by msys (@msys) on CodePen.

あとは、JavaScriptのところでオプションなどを設定してあげてカスタマイズができます。 オプションに関してはなんやかんやいっぱいあるので以下参照してください。 http://dimsemenov.com/plugins/magnific-popup/documentation.html  

ちょっとしたカスタム例

よく使うオプションとかをちょっと例にだしてみます。

Youtube
最近動画とか載せることが多くなりました。

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

iframe?
サイトとか載せたりします？

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

ギャラリー
的なのがおおいですかね

See the Pen MagnificPopup_demo3 by msys (@msys) on CodePen.

色々とたくさんあってこまる昨今、自分がカスタマイズし易いやつを見つければよいとか、動きが心地よいとか、選択する理由はいっぱいあると思いますが、そんなことも最初はわかりません。さわってみないと！実際使ってみないと！わかりませんよね。
ですので、最初の選択肢の一つとして、誰かが使いやすいよ。と言っているのを使ってみるのもよいかと思います。
誰かが良いというものはどこか優れているものがあると思うので＾＾

では、今回はこんなかんじでばいぶー