jQueryプラグイン

見ているページの上に、別のコンテンツをポップアップやスライドなどで、
表示させるモーダルウィンドウ。

メニューとしても使ったりできるので、何かと便利かと思います。

そんなモーダルウィンドウを簡単に実装できて、
出てくる動きや閉じる動きのオプションが揃っている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

さいごに

シンプルなモーダルウィンドウです。

モーダルウィンドウのスペースは特に書かれていないので、
中身は使い次第でいろいろ活用できそうです。

Tweet
このエントリーをはてなブックマークに追加
Pocket