[themeone_header type=”h2″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
animatedModal.js
[/themeone_header]

フラットデザインに合う素敵な動きのモーダルスクリプト。
ボヨヨーンとした動きが気持ちいいです。
サイトのデモでは、3種類のアニメーションを使ったモーダルを試せます。
アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できるようです。すごい。

★ダウンロードとデモはこちら
http://joaopereirawd.github.io/animatedModal.js/
[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
使い方
[/themeone_header]
[themeone_drop_cap letter=”1″ color=”accent-color2″ /]外部ファイルを読み込む
jQuery、animate.css、animatedModal.min.jsを読み込みます。
animatedModal.min.jsのディレクトリは利用環境に合わせて変えてください。

[themeone_drop_cap letter=”2″ color=”accent-color2″ /]HTML
モーダルウインドウを開くボタンとモーダルウインドウを実装します。
モーダルウインドウに使用しているid「animatedModal」はオプションで変更できます。

[themeone_drop_cap letter=”3″ color=”accent-color2″ /]Java Script
ボタンをjQueryのセレクタで指定して、スクリプトを実行します。
スクリプトのオプションでは、モーダルウインドウのターゲットやアニメーションを変更できるようです。
アニメーションの種類はanimate.css参照です。

[themeone_header type=”h3″ txtalign=”txt-left” subtitle=”” txtcolor=”accent-color1″ decor=”” decorcolor=”” decorheight=”2px”]
オプション
[/themeone_header]

modalTarget (default: animatedModal)
モーダルウインドウのターゲット
color (default: #39BEB9)
背景色
animatedIn (default: zoomIn)
モーダルウインドウが表示される時のエフェクト
animatedOut (default: zoomOut)
モーダルウインドウが閉じる時のエフェクト
animationDuration (default: .6s)
アニメーションのタイミング
overflow (default: auto)
オーバーフローの有無

こちらの記事を参考にさせていただきました。
いつもお世話になっています。
★[JS]操作が気持ちいいさまざまなアニメーションでモーダルウインドウを表示させるスクリプト -animatedModal.js（コリス）
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-animatedmodal.html