モーダルウィンドウというと、クリックするとポップアップで小窓が開いてそこにコンテンツが表示されるというイメージがありますが、このjQueryプラグイン「animatedModal.js」を使うと、小窓ではなくフルスクリーンでモーダルウィンドウが表示されます。
動きもにゅるっと、気持ちいい動きになっています。
フルスクリーンで表示されるので、モーダルで表示させたいコンテンツが多い時などに重宝しそうです。
サンプルを作ってみました。
⇒ モーダルをフルスクリーンで表示させるjQueryプラグイン「animatedModal.js」サンプル
動きは、サンプルを見ていただけるとわかると思います。
【使用方法】
まずはこちら（animatedModal.js）からファイル一式をダウンロードしましょう。
ダウンロードしたファイルの中に、デモがあるので、そちらを参考にしてもわかりやすいと思います。
＜head＞内に以下を記述して、animate.min.cssを読み込ませます。
|
1 |
<link rel="stylesheet" href="css/animate.min.css"> |
＜body＞内に例えば次のように記述します。＜/body＞の直前にjQuery本体とプラグインを読み込ませます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<body> <!--モーダルを開くためのリンク--> <a id="demo01" href="#animatedModal">DEMO01</a> <div id="animatedModal"> <!--モーダルを閉じる--> <div class="close-animatedModal"> CLOSE MODAL </div> <div class="modal-content"> <!--ここにモーダル内コンテンツ--> あいうえお </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/animatedModal.min.js"></script> <script> $("#demo01").animatedModal(); </script> </body> |
これで完成です。
オプションの設定は以下の通り。
color・・・ 背景色
animatedIn・・・ モーダルが開くときのアニメーション
animatedOut・・・ モーダルが閉じるときのアニメーション
※アニメーション効果はこちら。たくさんあります。
animationDuration・・・ アニメーションのスピード
overflow・・・ モーダルをスクロールできるようにするか。（scroll; hidden; auto;）
ちなみにオプションはこんな感じに記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="js/jquery.min.js"></script> <script src="js/animatedModal.min.js"></script> <script> //demo 01 $("#demo01").animatedModal(); //demo 02 $("#demo02").animatedModal({ modalTarget:'modal-02', animatedIn:'lightSpeedIn', animatedOut:'bounceOutDown', color:'#3498db', }); </script> |
あわせてお読みください
コンテンツをポップアップにして最前面に表示させるのがモーダルウィンドウです。モーダルウィンドウが開いている間は他の操作はできなくなるのが一般的です。 この「Re…
floating.js 「floating.js」は画像や絵文字、テキストなどの要素をページ上にフロートさせることができるjQueryプラグインです。 サンプル…
Backstretch 以前に、背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」を紹介しましたが、本家の…
コメントを残す