心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」

クリックするとより多くの情報が表示されるモーダル。
非常に便利で、デザインがシンプルなページが増えてきてより使用されるようにも感じています。
今回紹介するanimatedModal.jsはCSS3の動きの効果を利用して、心地良い動きをさせられるjQueryプラグインです。
心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」サンプル

使用方法 animatedModal.jsからファイル一式をダウンロード。
まずはanimate.cssを読み込みます。
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
次に、モーダル部分の記載です。
<a id="id名" href="#animatedModal">クリックしてね♪</a>
<!--ここからモーダル内-->
<div id="animatedModal">
<div class="close-animatedModal">
閉じるよ!
</div>
<div class="modal-content">
中身を記述します。
</div>
</div>

最後にjQuery本体とプラグインを読みこめば完成です。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="animatedModal.min.js"></script>
<script>
$("#id名").animatedModal();
</script>

最後の部分はオプションを追加できます。
・color:背景色
・animatedIn:モーダル表示時の動き
・animatedOut:モーダル閉じるときの動き
animeteの種類は豊富です。下記を参考に。
Animate.css
・animationDuration:アニメーショの速度
・overflow:モーダルをスクロールできるようにするかどうか

心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」サンプル

sponsors

「心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」」をシェアする

記事作成:
記事URL:

TOP > > > 心地よし!フルスクリーンでモーダル表示させるjQueryプラグイン「animatedModal.js」