デザイン

デザイン

無料で使えるモーダルウィンドウ用ライブラリとプラグイン12選!【アップデート版!】

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、12 Free Modal Window Libraries & Plugins For Your Site
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

21,988 views

読了時間 : 約4分14秒

最近ではJavascriptの技術の進化とオープンソースコミュニティーのおかげで、モーダルウィンドウが簡単に設定できるようになりました。本記事では、様々なスタイルの無料モーダルウィンドウ用プラグインを一挙ご紹介します。

 

 

1.jQuery Modal

http://jquerymodal.com/

クリーンでシンプルなものを探しているなら、こちらがおすすめ。

ESCキーなどのショートカットや、タッチイベントにも対応しています。また1KBと非常に軽いファイルです。

言うまでもなくデザインもシンプルで、どんなサイトにも使えます。

 

 

2.  leanModal

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

前述のjQuery Modal同様、クリーンなデザイン。

しかし、カスタムアニメーションや技術的なコンテンツのためのAPIにおけるコールバックに対応しているため、一味違います。

両者とも軽くjQueryで機能するため、重宝しそうです。

 

 

3. iziModal.js

http://izimodal.marcelodolce.com/

デザイン的な面でより多くの機能が付いているのがこちらのプラグイン。スライドダウンやフェードイン・フェードアウト等のアニメーションエフェクト、またログインや登録フォームの切り替えタブもあります。

クリーンなデザインとアニメーションエフェクトは個人的におすすめ。

設定は簡単ではなくファイルサイズもそれなりにありますが、それが問題でなければ最高のプラグインとなるでしょう。

 

 

4.  ARIA Modal

https://www.w3.org/TR/wai-aria/

アクセスビリティ(アクセスのしやすさ)を考えてデザインされるモーダルウィンドウは多くありませんが、ARIA Modalはその中のベストなjQueryプラグインです。

頻繁にアップデートされ、全てのデバイス、ブラウザ、クリック・タッチイベント等に対応しています。

唯一の問題はアクセスビリティにフォーカスするあまり、デザイン性が高くないこと。デザインはそんなに気にしないという方にはもってこいです。

 

 

5.  Remodal

http://vodkabears.github.io/remodal/

スピード重視で作られたRemodalはCSSアニメーションで動作し、jQueryのスクリプトも少なめです。

しかしこのプラグインはもう開発者によって管理されていないとのこと。

詳しくはGitHub repo(英文)に書いてありますが、セキュリティの危険性も低く、使い勝手は悪くなさそうです。

 

 

6.  FancyBox

http://fancyapps.com/fancybox/3/

厳密にいうとモーダルウィンドウではないのですが、ぜひ注目したいのがFancyBox。

jQueryで動作しモーダル写真ギャラリーが作れますが、他のモーダルウィンドウのようには機能しません。

しかしその動きから見てもわかるように、他のモーダルウィンドウと一緒に使用してもばっちりマッチすること間違いなしです。

 

 

7.  animatedModal.js

http://joaopereirawd.github.io/animatedModal.js/

小さなウィンドウを表示する代わりに、ページ全体に表示されるユニークなプラグインです。

多くの方のニーズには合わないかもしれませんが、落ち着いた雰囲気のデザインで、数多くのアニメーションエフェクトもあり、個人的にはおすすめ。

フルスクリーンのみ対応のため、それが必要な人には最適です。

 

8.  SimpleModal

http://simplemodal.plasm.it/

SimpleModalはデザインとユーザビリティのバランスが良く、派手なアニメーションやJavascriptに頼らずにとても自然な作りです。

トップページ(英文サイト)には、動画や画像、カスタムコンテンツ、ログイン画面等々のサンプルが見られます。

カスタマイズもでき、いろいろな用途に使えます。

 

9.  Avgrund Modal

http://labs.voronianski.com/jquery.avgrund.js/

他のものと一味違っているのがこちら。

クリックするとページ全体が背景へと押しやられます。全てのサイトで動作するものではありませんが、ユニークで面白いスタイルです。

jQueryで動作し、IE6以降のブラウザ対応。

 

 

10.  popModal

http://vadimsva.github.io/popModal/

このプラグインが人気の理由は、長文からボタン、シンプルなメッセージまで好きにカスタマイズができるということです。

CSSのコードも編集が簡単で、デザインの変更も自由自在。

アニメーションと自然にマッチするサイトには、持ってこいのプラグインです。

 

 

11. SweetAlert2

https://sweetalert2.github.io/

こちらは、Web上の警告スクリプトに最適です。

依存性のないバニラJSライブラリであり、WAI-ARIA標準に基づいて完全にアクセシブルです。 メインページをチェックすると、従来のアラートボックスとSweetAlertモーダルを比較することができます。

違いは明白です。

 

 

12. rmodal.js

https://rmodal.js.org/

今回取り上げたライブラリのほとんどはjQueryに依存しています。 しかし、依存関係が全くないモーダルスクリプトがあり、上記のSweetAlert2とともに、こちらもそうです。

rmodal.jsは、任意のサイトに適合する自然なモーダルウィンドウデザインを提供します。 JSライブラリには依存せず、合計で1.2KBに縮小されています。

 

また、これをBS3 / BS4レイアウトと組み合わせることを考えているなら、Bootstrapでうまくいくかもしれません。

rmodalがブラウザでどのように動作するかを見るためにサンプルプレビューを見てみましょう。依存関係のないスクリプトのための素晴らしい選択です。

 

 

※本記事は、12 Free Modal Window Libraries & Plugins For Your Siteを翻訳・再構成したものです。

 

 



【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
ins6je2v

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ