【34：layerBoard.js】ページアクセス時に最初に表示されるアレ(モーダル)

f:id:seintoseiya:20150812234835p:plain
プロジェクトNo.34：layerBoard.js - DEMO

たまにサイトに訪問すると、最前面に表示されるアレ。
実はモーダルウィンドウっていう名前のものなんですね。（私も今回初めて知りました）
layerBoard.jsは簡単にモーダルを表示させるためのJQuery プラグインです。

ライブラリのダウンロード

以下の公式サイトからライブラリファイルをダウンロードします。
【簡単！】ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js – FEVDES BLOG

今回ダウンロードしたのはlayerboard.zipです。
この中から使うのは以下のファイル。

jquery.layerBoard.js
jquery.cookie.js
layerBoard.css

以下のjqueryバージョンで動作が確認できました。

jquery1.10.1.min.js

基本的な使い方

HTML

まずはCSSとJSを呼び出し。

<link rel="stylesheet" type="text/css" href="layerBoard.css" media="all" />
<script src="./js/jquery1.10.1.min.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script src="./js/jquery.layerBoard.js"></script>

テキストアニメーションを適用する要素を記述します。

<!-- layer_board -->
<div id="layer_board_area"> <!-- id名任意 -->
	<div class="layer_board_bg"></div> <!-- クラス名固定 -->
	<div class="layer_board"> <!-- クラス名固定 -->
		<h2>ここにモーダルの内容を記述</h2>
		<p><img src="img/c2.jpg" /></p>
		<p class="btn_close"><a href="#">Close</a></p> <!-- クラス名固定 -->
	</div>
</div>
<!-- //layer_board -->

ここで注意なのがidとclassの名前。
一番外側のlayer_board_areaは、名前を変更した場合、この後のJSで指定する時に変えれば良いのですが、
layer_board_bg、layer_board、btn_closeのclass名はjquery.layerBoard.jsの中で指定されているため、変更すると動作しません。

JavaScript

layerBoard関数を呼び出す

これだけでも（デフォルト値で）動きます。

$(function(){
    $('#layer_board_area').layerBoard();
});

オプション

オプションを追加したい場合は以下の様に設定します。

$(function(){
    $('#layer_board_area').layerBoard({
        delayTime: 100, // 表示までの待ち時間(初期値：200)
        fadeTime : 500, // 表示のフェード時間(初期値：500)
        alpha : 0.8, // レイヤーの透明度(初期値：0.5)
        limitMin : 1, // 何分経過後に再度表示するか(初期値：1)
        easing: 'swing', // イージング(初期値：linear)
        limitCookie : 10 // cookie保存期間(初期値：1日)
    });
});