jQuery

【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js

「セール情報」や「重要なお知らせ」を、
モーダル(フロート)で目立たせたいという要望があったので、
ページのアクセス時にモーダル(フロート)を表示するjQueryプラグインを制作しました。

jquery.layerBoard.js」は商用利用・改変・再配布可能です。

デモ

トップページのアクセス時にモーダルを表示させるプラグイン。
ダウンロード:layerboard.zip【111KB】

デモをみる

アクセスするとモーダルがひらきます。

次にアクセスしても指定した時間までひらきません。

デフォルトでは1分で、再びひらくようになっています。
再びひらくまでの時間は分単位で指定できます。

必要なファイル

必要なのは

jQueryjquery.cookie.jsはサイトからダウンロードしてください。

jquery.layerBoard.jsは下記からダウンロードしてください。
ダウンロード:layerboard.zip【111KB】

ソース

[crayon]





[/crayon]

<head>内に記述しています。
レイヤーの背景色等を変更したい場合は「layerBoard.css」を変更してください。

[crayon]

close


[/crayon]

HTMLは上記の通りです。

id名の「id="layer_board_area"」は変更可能です。
変更した場合は、下記<script>内のid名を変更してください。

[crayon]
$('#layer_board_area').layerBoard();
[/crayon]

「class="layer_board_bg"」「class="layer_board"」「class="btn_close"」のclass名は変更不可です。

[crayon]

もう一度開く

[/crayon]

「class="layer_board_btn"」は、クリックすると指定時間に関係なくモーダルをひらくことができるボタンです。
「class="layer_board_btn"」のclass名は変更不可です。

オプション

オプションの「limitMin」で、再び表示するまでの時間を設定できます。

オプション 内容 デフォルト値
delayTime 表示までの待ち時間 200
fadeTime 表示のフェード時間 500
alpha レイヤーの透明度 0.5
limitMin 何分経過後に再度表示するか 1
easing イージング linear
limitCookie cookie保存期間 1日

オプション追加例

[crayon]
$('#layer_board_area').layerBoard({
delayTime: 1000,
fadeTime : 1000,
alpha : 0.8,
limitMin : 5,
easing: 'swing',
limitCookie : 10
});
[/crayon]

-jQuery