ユニークなアニメーション付きで全画面モーダルウィンドウを表示する animatedModal.js の使い方

animatedModal.js は様々なアニメーション付きでモーダルウィンドウを表示するjQueryプラグインです。
PCはもちろん、スマホやタブレットなどの表示領域が狭いデバイスでも、全画面表示だから有効的に使えそうです。
対応ブラウザはIE10↑、その他モダンブラウザ。

デモページ

使い方

必要なファイルを読み込む

以下からanimatedModal.js用のファイルをダウンロードして読み込みます。

animatedModal.js配布元

必要なファイルはanimatedModal.min.js、animate.cssと、jQueryライブラリ本体です。
animate.cssの最新版は以下からダウンロードできます。

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)');
});

RELATED POSTS