animatedModal.js は様々なアニメーション付きでモーダルウィンドウを表示するjQueryプラグインです。
PCはもちろん、スマホやタブレットなどの表示領域が狭いデバイスでも、全画面表示だから有効的に使えそうです。
対応ブラウザはIE10↑、その他モダンブラウザ。
使い方
必要なファイルを読み込む
以下からanimatedModal.js用のファイルをダウンロードして読み込みます。
必要なファイルはanimatedModal.min.js、animate.cssと、jQueryライブラリ本体です。
animate.cssの最新版は以下からダウンロードできます。
<link rel="stylesheet" type="text/css" href="css/animate.css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/animatedModal.js"></script>
html
1行目のaタグは、モーダルウィンドウを開くためのリンクです。href要素にモーダルウィンドウで表示させる要素を囲ったidを指定します。ここでは#content01です。
また、aタグにはJSで識別するためのidを付与しておきます。デフォルトでは#animatedModalですが、ここでは#demo01としています。idを変更した場合はjQueryのオプションにその旨記述する必要がありますので、事項のコード3行目を参考にしてください。
3行目は閉じるボタンです。このクラス名は「close-」に続けてモーダルウィンドウで表示する要素のid名を指定します。ここでは.close-content01です。
<a id="demo01" href="#content01">demo01</a> <div id="content01"> <span class="close-content01">×</span> <div class="modal-content"> <ul> <li><a href="#"><i class="fa fa-diamond"></i>menu1</a></li> <li><a href="#"><i class="fa fa-anchor"></i>menu2</a></li> <li><a href="#"><i class="fa fa-leaf"></i>menu3</a></li> <li><a href="#"><i class="fa fa-heart"></i>menu4</a></li> <li><a href="#"><i class="fa fa-gamepad"></i>menu5</a></li> <li><a href="#"><i class="fa fa-smile-o"></i>menu6</a></li> </ul> </div> </div>
jQuery demo1
2行目でaタグに指定したidに対して実行するようにしています。
3行目に、モーダルウィンドウで表示する要素を囲ったidを指定します。
アニメーションの種類はAnimate.cssのサイトにサンプルがあります。
プルダウンに表示されている名前をそのまま指定すればOKです。
$(function() { $('#demo01').animatedModal({ modalTarget:'content01', animatedIn:'bounceInUp', //表示する時のアニメーション animatedOut:'bounceOutDown', //閉じる時のアニメーション animationDuration:'1s', //アニメーションにかける秒数 color:'#15b7ff', //背景色 }); });
jQuery demo2
demo2ではCSSを上書きして、背景色を半透明にしてみました。
$(function() { $('#demo02').animatedModal({ modalTarget:'content02', animatedIn:'fadeInDown', animatedOut:'fadeOutUp', animationDuration:'1s', color:'#fff', }); //背景色を半透明に $('#content02').css('backgroundColor','rgba(255,255,255,0.8)'); });