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

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

animatedModal.js

画面一杯にモーダル画面表示時のアニメーションパターンがいくつかあります。
animatedModal.jsを使ってモーダル画面をアニメーション演出で表示する方法

Modaal

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

Lity

画像やYoTubeをポップアップ表示するできます。
lity.jsを使って画像やYoTubeをポップアップ表示する方法

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不使用】

最後に

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

※流用される場合は自己責任でお願いします。