無料で使えるモーダルウィンドウプラグイン18選。オープンソースの最新モーダルを取り入れよう

ウェルカムメッセージやオンボーディング、新機能の通知など、幅広く活用されている「モーダルウィンドウ」。

背景に半透明のレイヤーをかけつつ、ウィンドウを前面に表示することが多く、背景もウィンドウの内容も確認できるのが特徴です。ユーザーの注意をひく必要がある場合に役立ちます。

今回はCSS、JavaScript、jQuery等で作られた、無料で使えるオープンソースのモーダルウィンドウプラグイン18選をご紹介します。

1. jQuery Modal

言語：jQuery

特徴：シンプルで軽量、アクセシブルなjQueryモーダルウィンドウプラグイン。スタイル設定、フェードアニメーションの追加、jQueryイベントを使用したカスタム動作の実装などを手軽に行えるのが特徴です。ファイルサイズは約1KBと、極めて軽量なのもポイント。

jQuery Modal

2. animatedModal.js

言語：JavaScript

特徴：アニメーションがついたトランジションを含む、フルスクリーンのモーダルウィンドウプラグイン。アニメーション効果の大規模なライブラリと、カスタマイズ用のAPIが含まれています。インパクト抜群のデザインです。

animatedModal.js

3. jBox jQuery Plugin

言語：jQuery

特徴：モーダルウィンドウ、ツールチップ、そして複数のアニメーションとインタラクションオプションを備えたアプリ内通知を搭載したモーダルウィンドウプラグイン。パワフルさとフレキシブルさが魅力です。

jBox jQuery Plugin

‍‍4. SweetAlert2

言語：JavaScript、CSS

特徴：JavaScriptのポップアップアラートに代わる、ポップアップモーダルウィンドウ。レスポンシブかつアクセシブル（WAI-ARIA）で、カスタマイズ性も抜群。Ajaxリクエスト、複数のチェーンモーダル、カスタムアニメーション、そして右から左に記述する言語のサポートオプションも含まれています。

‍‍SweetAlert2

5. Modal.js for Bootstrap

言語：JavaScript

特徴：フェードインアニメーションのオン／オフの切り替え、モーダル内でのBootstrapグリッドシステムの適用、モーダルウィンドウ自体へのツールチップの表示などが可能なモーダルウィンドウプラグイン。

Modal.js for Bootstrap

6. Vex dialogs

言語：CSS、JavaScript

特徴：クリーンで現代的なデザインが特徴のモーダルウィンドウプラグイン。7KB以下であるにもかかわらず、複数のテーマ、アニメーション、オーバーレイなどを提供しています。カスタマイズも簡単です。

Vex dialogs

7. Responsive Material Design Modals

言語：CSS、JavaScript

特徴：マテリアルデザインを意識して制作された、現代的かつレスポンシブなモーダルウィンドウ。大きなボタンとアニメーションが特徴です。

Responsive Material Design Modals

8. Featherlight.js

言語：jQuery

特徴：プロにおすすめの実用的なモーダルウィンドウプラグイン。400行のJavaScriptと、100行のCSSで構成されており、6KBという軽量さも魅力です。

Featherlight.js

9. Basic CSS-Only Modal

言語：CSS

特徴：CSSのみで構築された、シンプルでコンパクトなモーダルウィンドウプラグイン。:target擬似クラスをベースにしています。

Basic CSS-Only Modal

10. Avgrund Modal

言語：jQuery

特徴：モーダルウィンドウを表示する際に、背景全体を縮小するユニークなデザインを採用しています。控えめながらも目をひきますね。

Avgrund Modal

11. iziModal.js

言語：jQuery

特徴：数十個の洗練されたデザインのアニメーションやエフェクトを備えた、タブ付きのモーダルウィンドウ（ログインおよびサインアップフォーム用）。レスポンシブかつカスタマイズ可能なところもポイントです。

iziModal.js

12. Boardal—An Onboarding Modal with Vue.js

言語：CSS、JavaScript

特徴：ユーザーオンボーディングに特化した、複数のモーダルウィンドウを提供しています。進行状況をあらわすインジケーター、進む／戻るボタン、スクロール機能、コンテンツ間の水平／垂直遷移のオプションが含まれています。

Boardal—An Onboarding Modal with Vue.js

13. ARIA modal

言語：jQuery

特徴：アクセシビリティを考慮してデザインされた、シンプルで軽量なモーダルウィンドウプラグイン。数多くのブラウザおよびデバイスに対応しています。

ARIA modal

14. Morphing Modal

言語：CSS、jQuery

特徴：CTAボタンから展開する、ユニークなデザインのフルスクリーンモーダルウィンドウプラグイン。CSSのトランジションとトランスフォーメーション、jQuery、Velocity.jsを搭載しています。

Morphing Modal

15. Tingle

言語：JavaScript

特徴：JavaScriptのみで構築された、シンプルなモーダルウィンドウプラグイン。依存関係がなく、CSSによってカスタマイズ可能です。

Tingle

16. Flexbox-based modal

言語：CSS、JavaScript

特徴：モーダルにデータ属性を渡すためのオプションを備えた、シンプルでレスポンシブな、フレックスボックスベースのモーダルウィンドウプラグイン。アニメーション付きのモーダルヘッダーとアイコンメニューが、モーダルウィンドウを彩っています。

Flexbox-based modal

17. Modaal

言語：CSS、JavaScript

特徴：フレキシブルかつレスポンシブ、そしてアクセシブル（WCAG 2.0 ／レベルAA）なモーダルウィンドウプラグイン。Sassオプションを備えており、CSSを編集してカスタマイズできます。

Modaal

‍‍18. Simple Modal

言語：CSS、JavaScript

特徴：現代的なデザインとアニメーションが特徴の、小さなモーダルウィンドウが実装できるプラグイン。シンプルで短いメッセージに、絶妙な動きがアクセントになっています。

‍‍Simple Modal

おわりに

シンプルなものから、ユニークなデザインやアニメーションを採用しているものまで、さまざまなモーダルウィンドウをご紹介しました。

特定の用途に特化しているものや、ツールチップなどを提供しているものもあるので、用途にあわせてぜひ活用してみてください。

執筆：Katryna Balboni
翻訳：Nakajima Asuka
編集：内田一良（じきるう）

こちらもおすすめ！▼