jQuery/Vanilla Javascript

モーダル系JSライブラリ実践で使える間違いなしの厳選5つ

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今回はたくさんあるモーダル系ライブラリのなかからクライアント提案など実戦で本当に使えると思ったものを5つ紹介します。
すべて実際に実装済み&本サイトで解説・サンプルデモつきです。

modaal
実装しやすさ★★★☆☆
デザイン★★☆☆☆
軽量性★★☆☆☆
汎用性 ★★★★★

※jQuery依存

動画などのiframe、webページ、インラインなにがきても対応できる万能モーダルライブラリでフルスクリーンも可能です。実装も簡単でソースもそれほど古くないです。

解説サンプルはこちら

実装しやすさ★★★☆☆
デザイン★★☆☆☆
軽量性★★☆☆☆
汎用性 ★★★★☆

※jQuery依存

こちらも動画、webページ、インラインなにがきても対応できる初期の歴史ある万能モーダルライブラリです。modaalに出会うまではMagnific Popupばかり使っていました。

解説サンプルはこちら

remodal
実装しやすさ★★★★★
デザイン★★★★☆
軽量性★★★☆☆
汎用性 ★☆☆☆☆

※jQuery依存

レスポンシブ対応のモーダルライブラリとしては古株のイメージです。タグの属性設定のみで動かせるのでjs超初心者でも実装可能です。

Documentではiframe、Ajaxは対応なしです。

解説サンプルはこちら

izimodal
実装しやすさ★★★☆☆
デザイン★★★☆☆
軽量性★★☆☆☆
汎用性 ★★★★☆

※jQuery依存

アニメーション、アラートに長けているモーダルライブラリです。YouTube ・ Vimeo ・ GoogleMapなどのiframeやAjaxの読み込み、フルスクリーンにも対応しています。

解説サンプルはこちら

micromodal
実装しやすさ★☆☆☆☆
デザイン★★★☆☆
軽量性★★★★★
汎用性 ★☆☆☆☆

※jQuery依存なし

Micromodal.jsの特徴はWAI-ARIAガイドラインに準じたアクセシビリティに対応されている点と1.9KBと非常に軽量であることです。

基本的な実装仕様としてはIE対応もしなければならないので実践で使うライブラリとしてはweb制作初心者には少し敷居が高く感じました。

AJAXやiframeの実装にはさらに知識が必要になります。

公的機関などののサイトの提案にはとても向いているように感じました。

解説サンプルはこちら

現時点でのモーダル5選でした。
汎用性で選ぶならModaal、Magnific Popup、iziModalで、軽量重視ならMicromodal.js、実装しやすさはRemodalといったところでしょうか。

今後注目されそうなライブラリはMicromodal.jsのようなjQueryに依存しない軽量ライブラリだと思いました。アクセシビリティに対応してるのも新しいですが、他のライブラリでも改修は難しくない気がします。

サイトでのモーダルウィンドウの用途によってより適切なライブラリを選んでいきましょう。

uhaha

さらに優れたライブラリがでてきそう。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*