【jQuery】いろいろな気持ちいい動きをつけられるモーダルウィンドウ-animatedModal.jsの使い方-
見ているページの上に、別のコンテンツをポップアップやスライドなどで、
表示させるモーダルウィンドウ。
メニューとしても使ったりできるので、何かと便利かと思います。
そんなモーダルウィンドウを簡単に実装できて、
出てくる動きや閉じる動きのオプションが揃っているanimatedModal.jsの使い方です。
ダウンロード
animatedModal.jsのサイトからファイル一式をダウンロードします。
animatedModal.js
読み込み
ダウンロードしたZipファイルを解凍します。
demoフォルダの中のcssの中にある「animate.min.css」と、
jsの中にある「animatedModal.min.js」を読み込みます。
<link rel="stylesheet" href="animate.min.css"> <script src="animatedModal.min.js"></script>
HTML
モーダルウィンドウを開くボタンと、
モーダルウィンドウのエリアを追加します。
<a id="modal" href="#animatedModal">モーダルウィンドウを開く</a> <div id="animatedModal"> <div class="close-animatedModal close1">モーダルウィンドウを閉じる</div> <div class="modal-content"> <ul id="cate1"> <li><a href="#"><img src="images/IMG1.jpg" height="334" width="500" alt=""><p>日向で寝る猫</p></a></li> <li><a href="#"><img src="images/IMG2.jpg" height="334" width="500" alt=""><p>花鳥園のインコ</p></a></li> <li><a href="#"><img src="images/IMG3.jpg" height="334" width="500" alt=""><p>ひょうたんらんぷ</p></a></li> </ul> </div> <div class="close-animatedModal close2">モーダルウィンドウを閉じる</div> </div>
モーダルウィンドウを開くボタンのhrefのリンク先、
今回でいうと「animatedModal」とモーダルウィンドウのエリアのidと
閉じるボタンの「close-」のあとは同じ名称にしておきます。
閉じるボタンのclassの命名規則は、
「close-」のあとにモーダルウィンドウのエリアのidをつけるようになっているみたいです。
classなので、何箇所でも閉じるボタン置けます。
今回は右上と最下部に置いてみました。
jQuery
以下を追加します。
idはモーダルウィンドウを開くボタンと同じにしておきます。
$("#modal").animatedModal();
CSS
CSSは特にありませんが、
ボタンをハンバーガーメニューにしたり、閉じるは×ボタンにしてみてもいいと思います。
オプション
いくつかオプションが用意されています。
$("#modal").animatedModal({ // 開くモーダルウィンドウを指定できます。デフォルトはanimatedModalですが、 // モーダルウィンドウのエリアのidを振ることで、独自の設定ができます。 modalTarget:'animatedModal', // モーダルウィンドウが開くときの動きを設定できます。 animatedIn:'bounceInUp', // モーダルウィンドウが閉じるときの動きを設定できます。 animatedOut:'bounceOutDown', // モーダルウィンドウの背景色の設定ができます。 color:'#555', // アニメーションの時間を設定できます。 animationDuration: '.6s', // モーダルウィンドウのエリア外のものを非表示にしたり、スクロールにします。 overflow: 'auto' });
モーダルウィンドウが開くときと閉じるときの動きは、
Animate.cssを使っているため、下記サイトから選べます。
Animate.css
さいごに
シンプルなモーダルウィンドウです。
モーダルウィンドウのスペースは特に書かれていないので、
中身は使い次第でいろいろ活用できそうです。