おしゃれなアニメーションのモーダルウィンドウを実装できる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」!でした。

Amazonで欲しい商品を安く手に入れる方法!

Amazonでお得に買い物をしたいならAmazonギフト券の現金チャージするのがおすすめです。
現金チャージする度に最大2.5%分のポイントが貯まります。

現在キャンペーン中なので、初めて5,000円以上の現金チャージする場合は1,000円分のポイントがもらえます。
いつキャンペーンが終了するか分からないので、Amazonをよく利用される方はいますぐにやっておきたいですね。

この記事を読んだ人はこんな記事も読んでいますよ