【漫画】フリーランスは“103万円の壁”にどう向き合うか?
- お金
- フリーランス/個人事業主
- 漫画
ウェルカムメッセージやオンボーディング、新機能の通知など、幅広く活用されている「モーダルウィンドウ」。
背景に半透明のレイヤーをかけつつ、ウィンドウを前面に表示することが多く、背景もウィンドウの内容も確認できるのが特徴です。ユーザーの注意をひく必要がある場合に役立ちます。
モーダルとは?モーダルウィンドウの使い方を徹底解説
Workship MAGAZINE
今回はCSS、JavaScript、jQuery等で作られた、無料で使えるオープンソースのモーダルウィンドウプラグイン18選をご紹介します。
目次
言語:jQuery
特徴:シンプルで軽量、アクセシブルなjQueryモーダルウィンドウプラグイン。スタイル設定、フェードアニメーションの追加、jQueryイベントを使用したカスタム動作の実装などを手軽に行えるのが特徴です。ファイルサイズは約1KBと、極めて軽量なのもポイント。
言語:JavaScript
特徴:アニメーションがついたトランジションを含む、フルスクリーンのモーダルウィンドウプラグイン。アニメーション効果の大規模なライブラリと、カスタマイズ用のAPIが含まれています。インパクト抜群のデザインです。
言語:jQuery
特徴:モーダルウィンドウ、ツールチップ、そして複数のアニメーションとインタラクションオプションを備えたアプリ内通知を搭載したモーダルウィンドウプラグイン。パワフルさとフレキシブルさが魅力です。
言語:JavaScript、CSS
特徴:JavaScriptのポップアップアラートに代わる、ポップアップモーダルウィンドウ。レスポンシブかつアクセシブル(WAI-ARIA)で、カスタマイズ性も抜群。Ajaxリクエスト、複数のチェーンモーダル、カスタムアニメーション、そして右から左に記述する言語のサポートオプションも含まれています。
言語:JavaScript
特徴:フェードインアニメーションのオン/オフの切り替え、モーダル内でのBootstrapグリッドシステムの適用、モーダルウィンドウ自体へのツールチップの表示などが可能なモーダルウィンドウプラグイン。
言語:CSS、JavaScript
特徴:クリーンで現代的なデザインが特徴のモーダルウィンドウプラグイン。7KB以下であるにもかかわらず、複数のテーマ、アニメーション、オーバーレイなどを提供しています。カスタマイズも簡単です。
言語:CSS、JavaScript
特徴:マテリアルデザインを意識して制作された、現代的かつレスポンシブなモーダルウィンドウ。大きなボタンとアニメーションが特徴です。
Responsive Material Design Modals
言語:jQuery
特徴:プロにおすすめの実用的なモーダルウィンドウプラグイン。400行のJavaScriptと、100行のCSSで構成されており、6KBという軽量さも魅力です。
言語:CSS
特徴:CSSのみで構築された、シンプルでコンパクトなモーダルウィンドウプラグイン。:target擬似クラスをベースにしています。
言語:jQuery
特徴:モーダルウィンドウを表示する際に、背景全体を縮小するユニークなデザインを採用しています。控えめながらも目をひきますね。
言語:jQuery
特徴:数十個の洗練されたデザインのアニメーションやエフェクトを備えた、タブ付きのモーダルウィンドウ(ログインおよびサインアップフォーム用)。レスポンシブかつカスタマイズ可能なところもポイントです。
言語:CSS、JavaScript
特徴:ユーザーオンボーディングに特化した、複数のモーダルウィンドウを提供しています。進行状況をあらわすインジケーター、進む/戻るボタン、スクロール機能、コンテンツ間の水平/垂直遷移のオプションが含まれています。
Boardal—An Onboarding Modal with Vue.js
言語:jQuery
特徴:アクセシビリティを考慮してデザインされた、シンプルで軽量なモーダルウィンドウプラグイン。数多くのブラウザおよびデバイスに対応しています。
言語:CSS、jQuery
特徴:CTAボタンから展開する、ユニークなデザインのフルスクリーンモーダルウィンドウプラグイン。CSSのトランジションとトランスフォーメーション、jQuery、Velocity.jsを搭載しています。
言語:JavaScript
特徴:JavaScriptのみで構築された、シンプルなモーダルウィンドウプラグイン。依存関係がなく、CSSによってカスタマイズ可能です。
言語:CSS、JavaScript
特徴:モーダルにデータ属性を渡すためのオプションを備えた、シンプルでレスポンシブな、フレックスボックスベースのモーダルウィンドウプラグイン。アニメーション付きのモーダルヘッダーとアイコンメニューが、モーダルウィンドウを彩っています。
言語:CSS、JavaScript
特徴:フレキシブルかつレスポンシブ、そしてアクセシブル(WCAG 2.0 /レベルAA)なモーダルウィンドウプラグイン。Sassオプションを備えており、CSSを編集してカスタマイズできます。
言語:CSS、JavaScript
特徴:現代的なデザインとアニメーションが特徴の、小さなモーダルウィンドウが実装できるプラグイン。シンプルで短いメッセージに、絶妙な動きがアクセントになっています。
シンプルなものから、ユニークなデザインやアニメーションを採用しているものまで、さまざまなモーダルウィンドウをご紹介しました。
特定の用途に特化しているものや、ツールチップなどを提供しているものもあるので、用途にあわせてぜひ活用してみてください。
執筆:Katryna Balboni
翻訳:Nakajima Asuka
編集:内田一良(じきるう)
こちらもおすすめ!▼
モーダルとは?モーダルウィンドウの使い方を徹底解説
Workship MAGAZINE
CSS/jQuery/JavaScriptで作られた無料ツールチッププラグイン21選
Workship MAGAZINE