モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。

動きもにゅるっと、気持ちいい動きになっています。

フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。

サンプルを作ってみました。

⇒ モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」サンプル

動きは、サンプルを見ていただけるとわかると思います。

【使用方法】
まずはこちら(animatedModal.js)からファイル一式をダウンロードしましょう。

ダウンロードしたファイルの中に、デモがあるので、そちらを参考にしてもわかりやすいと思います。

<head>内に以下を記述して、animate.min.cssを読み込ませます。

<body>内に例えば次のように記述します。</body>の直前にjQuery本体とプラグインを読み込ませます。

これで完成です。

オプションの設定は以下の通り。
color・・・ 背景色
animatedIn・・・ モーダルが開くときのアニメーション
animatedOut・・・ モーダルが閉じるときのアニメーション
アニメーション効果はこちら。たくさんあります。
animationDuration・・・ アニメーションのスピード
overflow・・・ モーダルをスクロールできるようにするか。(scroll; hidden; auto;)

ちなみにオプションはこんな感じに記述します。

この記事と関連してると思われる記事: