FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

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

      2013/09/01

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

SPONSORED LINK

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

デモ

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

デモをみる

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

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

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

必要なファイル

必要なのは

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

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

ソース

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

HTMLは上記の通りです。

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

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

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

オプション

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

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

オプション追加例

 - jQuery