読者です 読者をやめる 読者になる 読者になる

one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【34:layerBoard.js】ページアクセス時に最初に表示されるアレ(モーダル) | JQueryプラグイン

one's wayプロジェクト JQuery

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

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

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

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

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

以下の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日)
    });
});

全ソースはこちら

github.com

関連アプリ・書籍

jQuery入門道場

jQuery入門道場

jQuery レッスンブック jQuery2.X/1.X対応

jQuery レッスンブック jQuery2.X/1.X対応

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)