今回はたくさんあるモーダル系ライブラリのなかからクライアント提案など実戦で本当に使えると思ったものを5つ紹介します。
すべて実際に実装済み&本サイトで解説・サンプルデモつきです。
Modaal
| 実装しやすさ | ★★★☆☆ |
| デザイン | ★★☆☆☆ |
| 軽量性 | ★★☆☆☆ |
| 汎用性 | ★★★★★ |
※jQuery依存
動画などのiframe、webページ、インラインなにがきても対応できる万能モーダルライブラリでフルスクリーンも可能です。実装も簡単でソースもそれほど古くないです。
Magnific Popup
| 実装しやすさ | ★★★☆☆ |
| デザイン | ★★☆☆☆ |
| 軽量性 | ★★☆☆☆ |
| 汎用性 | ★★★★☆ |
※jQuery依存
こちらも動画、webページ、インラインなにがきても対応できる初期の歴史ある万能モーダルライブラリです。modaalに出会うまではMagnific Popupばかり使っていました。
Remodal
| 実装しやすさ | ★★★★★ |
| デザイン | ★★★★☆ |
| 軽量性 | ★★★☆☆ |
| 汎用性 | ★☆☆☆☆ |
※jQuery依存
レスポンシブ対応のモーダルライブラリとしては古株のイメージです。タグの属性設定のみで動かせるのでjs超初心者でも実装可能です。
Documentではiframe、Ajaxは対応なしです。
iziModal
| 実装しやすさ | ★★★☆☆ |
| デザイン | ★★★☆☆ |
| 軽量性 | ★★☆☆☆ |
| 汎用性 | ★★★★☆ |
※jQuery依存
アニメーション、アラートに長けているモーダルライブラリです。YouTube ・ Vimeo ・ GoogleMapなどのiframeやAjaxの読み込み、フルスクリーンにも対応しています。
Micromodal.js
| 実装しやすさ | ★☆☆☆☆ |
| デザイン | ★★★☆☆ |
| 軽量性 | ★★★★★ |
| 汎用性 | ★☆☆☆☆ |
※jQuery依存なし
Micromodal.jsの特徴はWAI-ARIAガイドラインに準じたアクセシビリティに対応されている点と1.9KBと非常に軽量であることです。
基本的な実装仕様としてはIE対応もしなければならないので実践で使うライブラリとしてはweb制作初心者には少し敷居が高く感じました。
AJAXやiframeの実装にはさらに知識が必要になります。
公的機関などののサイトの提案にはとても向いているように感じました。
まとめ
現時点でのモーダル5選でした。
汎用性で選ぶならModaal、Magnific Popup、iziModalで、軽量重視ならMicromodal.js、実装しやすさはRemodalといったところでしょうか。
今後注目されそうなライブラリはMicromodal.jsのようなjQueryに依存しない軽量ライブラリだと思いました。アクセシビリティに対応してるのも新しいですが、他のライブラリでも改修は難しくない気がします。
サイトでのモーダルウィンドウの用途によってより適切なライブラリを選んでいきましょう。
さらに優れたライブラリがでてきそう。
