JavaScript

JavaScriptおすすめモーダル系プラグイン9選

モーダル表示はプラグイン使わなくても簡単に実装できますが、表示時のアニメーション演出等を探すとプラグインが色々あったのでおすすめモーダル系プラグイン9選を紹介します。

animatedModal.js

画面一杯にモーダル画面表示時のアニメーションパターンがいくつかあります。
animatedModal.jsで魅力的なアニメーションモーダルを簡単に作成する完全ガイド

Modaal

モーダルをCookie制御(jquery-cookie)と組み合わせて表示させることも出来ます。
modaal.jsとjquery.cookie.jsを使ってモーダルの再表示期間を設定する方法
modaal.jsで簡単にYouTube動画をモーダル表示する方法

Lity

画像やYoTubeをポップアップ表示するできます。
lity.js活用ガイド:画像・YouTube動画を魅力的にポップアップ表示する方法

Lightbox2

昔からある画像をモーダル表示させるLightboxプラグインです。
Lightbox2完全ガイド:画像をポップアップ(モーダル)表示させる簡単ステップ

fancybox

こちらも昔からありますが、タッチやレスポンシブに対応可能なlightboxモーダル表示です。
fancybox.jsを使ってタッチやレスポンシブ対応可能なlightboxモーダル表示方法

Modal (モーダル) · Bootstrap

HTML/CSSフレームワークBootstrapにあるmodal機能を使ってモーダル表示ができます。
Bootstrapを使って簡単にモーダル画面を表示する方法

FullMod

ブラウザ全体にモーダル画面を表示する演出パターンがいくつかあるプラグインです。
モーダル画面をブラウザ全体に表示する方法【fullmod.js】

lightgallery.js

Lightbox的に複数画像をモーダル表示できます。jQuery不要で簡単に設定可能です。
jQuery不要で簡単に設定できるlightgallery.jsを使って複数画像をモーダル表示する方法

JavaScript(プラグイン、jQuery不使用)

jQueryやJavaScriptプラグインを使用せず、シンプルにJavaScriptだけでモーダル表示する方法です。複雑な表示演出や切替等を行わず、シンプルにモーダル表示させたい時に使えます。
JavaScriptでモーダル表示する方法【プラグイン、jQuery不使用】

 

これらのプラグインは、モーダル表示を実装するための選択肢の一つです。プロジェクトの要件やデザインに合わせて最適なプラグインを選んでください。
また、使用する際には公式ドキュメントを参照して適切に設定やカスタマイズを行うことをおすすめします。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。