おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」!

2016/08/03

こんにちは。
今回はおしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」!です。

コンテンツやiframe、フォームやアラートなども可能なレスポンシブ対応のモーダルウィンドウを実装できる軽量jQueryプラグインを紹介します。

おしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」!

iziModal

izimodal

 

jQueryプラグイン「iziModal」をダウンロードしてみよう!

https://github.com/dolce/iziModalにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。

 

jQueryプラグイン「iziModal」を設置してみよう!

iziModal.min.cssをhead内に読み込みます。

 

jQuery本体とiziModal.min.jsを/bodyの手前に読み込みます。

 

その下に下記のスクリプトを記述します。

 

html部分を記述します。
リンク部分に先程指定した「trigger」というclassを付けますよ。
モーダルウィンドウで表示させたい箇所に先程指定した「modal」というidを付けます。

 

jQueryプラグイン逆引きハンドブック
jQueryプラグイン逆引きハンドブック

 

いかがでしたか。オプションも豊富なので、様々なシーンで活躍できそうですね。
以上でおしゃれなアニメーションのモーダルウィンドウを実装できるjQueryプラグイン「iziModal」!でした。

topへ戻る