10個の無料のJavaScriptモーダルウィンドウプラグイン

発見できる 純粋なCSSモーダルがたくさん しかしこれら JavaScriptと同じコントロールを提供しないでください. JavaScriptモーダルを使用すると、カスタムアニメーション、UI入力を追加し、本当にユーザーエクスペリエンスを向上させることができます。.

しかし、なぜ最初から何かを設計するのですか あなたはJSライブラリを使用することができます? 私は集めました 最高の無料JavaScript搭載モーダルスクリプト あなたのお気に入りを熟読して選び出すためにここに.

これらはすべて 完全無料でオープンソース, だからあなたは必要に応じてあなたのサイトに合うようにコードを編集してそれらを再スタイルすることができます.

1.うずき

私のお気に入りの無料のモーダルスクリプトの1つは、 Tingle.js. それは 依存関係のないバニラJavaScript上に構築された, ですから、jQueryやZeptoのライブラリは必要ありません。.

それは持っていますがプラス、それはかなり小さなライブラリです カスタマイズのためのたくさんのオプション. CSSトランジション、JavaScriptモーダルアニメーション、そしてユーザーエクスペリエンス全体をわずかな設定で変更できます。.

Tingle.jsは以下のように設計されています。 完全にアクセス可能で反応がよい, そのため、モバイルデバイス上で動作し、古いブラウザもサポートします。.

見ることができます GitHubに関するすべてのドキュメント, 無料のソースコードと一緒に。デモリンクもありますので、 Tingleを実際にチェックする あなたのウェブサイトに収まるかどうかを確認する.

バニラモーダル

これが最近見つけたモーダルです。 ほとんどのものよりもずっと簡単. バニラモーダル その名前にあてはまる 純粋なバニラスクリプト と共にモーダルに力を与える CSSトランジション.

これはかなり小さくて、とても柔軟です、 ウィンドウのスタイルを変更するためのカスタムCSS. それはまた持っています JavaScriptで変更できるかなりの数のオプション, DOM関数やコールバック関数を実行するのに最適です。.

でのぞき見をする デモページ デフォルトのスタイルを見るために。それは本当に基本的なデザインです。 本番サイトで使用するにはカスタマイズが必要. しかし、これはまた、総コード要件を減らすので、それはそれです 最も細いJavaScriptモーダルライブラリの1つ.

3. plainModal

あなたが本当に簡単なスクリプトが欲しいなら、私は強くお勧めします plainModal. それは jQueryの上に構築された, しかし、それは 利用可能な最小のモーダルスクリプトの1つ.

します 外部のCSSや画像ファイルを使用しない. 1つのJSスクリプトだけで十分です。.

plainModalスクリプトがページに追加されたら、 モーダルボタンをターゲットにする そして行ってもいいです。これはあなたが表示を制御し、どのくらいモーダルインターフェースを変更したいかをあなたに与えます。.

加えて、できます 1行のJavaScriptでモーダルを設定する このプラグインのミニマリストのテーマに沿って.

モーダル

否定はありません アクセシビリティはWeb上で巨大です. すべてのデザイナーの目標は より包括的な経験 世界中の人々のためのさまざまなデバイス上での制限付き.

あり モーダル, あなたはその完璧な経験を得る 堅実なAAアクセシビリティ評価でWCAG 2.0テストに合格. あなたはいくつかのコードドキュメンテーションと共にメインページで素晴らしい例を見ることができます.

全体的に、私はこのバニラJavaScriptプラグインをお勧めします アクセシビリティを本当に気にする人のために. AA評価はいくつかのWebプロジェクトで要求されることがあるので、Modaalはブックマークを付けておくのに本当に便利なスクリプトです。.

5.スコッチJSモーダル

Scotch.ioの開発チームは、コーダーのためのチュートリアルとガイドを公開しています。彼らの作品は信じられないほど素晴らしいものです。 Scotch GitHubでホストされているこのJavaScriptモーダルスクリプト.

モーダルはKen Wheelerによって開発され、このスクリプトも 完全なチュートリアルがあります あなたはそれがどのように機能するかを知りたいのなら。しかし、フリーコードはほとんどの開発者にとってこれで十分なはずです。 超軽量でセットアップが簡単. 依存関係はありません。さらにCodePenのサンプルデモもあります。.

6. Bootbox.js

最速の方法 新しいWebプロジェクトを立ち上げる ブートストラップによるものです。開発者に次のことを奨励する強力なフロントエンドフレームワークです。 ライブラリに独自のアドオンを作成する.

その一例は Bootbox.js, 小さなJavaScriptライブラリ, ブートストラップのモーダルウィンドウ専用に設計されています. 実際には ダイアログボックスで動作します リクエストに基づいて、ユーザーが[OK]または[キャンセル]をクリックできる場所.

警告ボックスのように、典型的なJavaScriptダイアログはひどいものです。 Bootboxスクリプトは BS3 / BS4エコシステムで働いている人のための確かな代替手段.

繰り返しますが、 完全無料でオープンソース, と一緒に 長いドキュメントページ 早く立ち上がるために.

7. iziModal.js

もし、あんたが もう少しカスタマイズされたソリューションが必要 チェックアウト iziModal.js. このツールは 完全に反応がよい そしてに設計されて 最近のすべてのブラウザで完璧に動作する.

私はまだそのような審美的に心地よいデザインを提供する別のモーダルスクリプトを見つけることがありません。それは門から出てくる 事実上あらゆるウェブサイトに溶け込むことができる豪華なUI. しかし、できます またデザインを作り直す あなたのニーズに合うように.

このプラグインに注意してください jQueryで動作しますか, だからそれはここで数少ないの一つです 依存関係があります. しかし、あなたがiziModalスタイルを望むのであれば、それはそのようななめらかなポップオーバーウィンドウの代金を払うために小さな価格です.

8. jQueryモーダル

の jQuery Modalプラグイン おそらく あなたが見つけることができるjQuery上の最も単純なモーダルスクリプト.

それはにプログラムすることができます 特定のHTML要素と自動的にバインドする さまざまな属性に基づいています。また キーボードショートカットをサポート ウィンドウを閉じるためのESCなど.

合計で、このプラグイン 1KB未満の対策 そしてそれ あなたが想像できるすべての可能なブラウザで動作します. jQuery開発者は余分な飾りなしで簡単なモーダルスクリプトに素早くアクセスするためにこのプラグインを保存しておくべきです.

9.ピコモード

バニラJavaScriptに戻って、私たちは持っています PicoModalライブラリ. これはおそらくあなたが見つける最小のスクリプトのひとつであり、それは バニラJavaScriptバックボーン上で完全に実行する.

それ 最近のすべてのブラウザをサポート, Android用のモバイルブラウザとiOS用のMobile Safariを含みます。 IE7までさかのぼる、より古いIEブラウザさえもサポートします。!

PicoModalの開発者 小さなJSfiddleスクリプトを作成しました その仕組みを説明するこれは非常に小さな例です。 クリックイベントや他の何かに縛られていない, しかしそれは難しいことではありません いくつかのトグルボタンのスクリプト このモーダルウィンドウを正しく実行するため.

10. Avgrund

Avgrund このリストの中でおそらく最もユニークなモーダルの1つです。それを使用します カスタムページのフェード効果と縮小するアニメーション モーダルを正しく表示する.

誰もがこのアニメーションを理解するわけではないので、このスクリプトがすべてのWebサイトに適しているとは言えません。しかし、それは 純粋なバニラモーダル そしてセットアップはとても簡単です, CSSとJavaScriptファイルだけでe.

を見てください。 デモページ 実行方法を確認します。それは確かにユニークなスタイルを持っています 注目を集めるためにバインド うまく機能するカスタムアニメーションを使って.

最後の言葉

あなたが探しているものが何であれ、私はあなたのニーズに合うようにこのリストの中に何かがあるはずです。しかし、あなたはまだ満足していない場合 関連するモーダルスクリプトについてはGitHubを閲覧する あなたが他に何を見つけることができるかを見る.