【簡単！】ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js
2013/09/01
「セール情報」や「重要なお知らせ」を、
モーダル（フロート）で目立たせたいという要望があったので、
ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。
「jquery.layerBoard.js」は商用利用・改変・再配布可能です。
デモ
トップページのアクセス時にモーダルを表示させるプラグイン。
ダウンロード：layerboard.zip【111KB】
アクセスするとモーダルがひらきます。
次にアクセスしても指定した時間までひらきません。
デフォルトでは1分で、再びひらくようになっています。
再びひらくまでの時間は分単位で指定できます。
必要なファイル
必要なのは
jQueryとjquery.cookie.jsはサイトからダウンロードしてください。
jquery.layerBoard.jsは下記からダウンロードしてください。
ダウンロード：layerboard.zip【111KB】
ソース
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<link rel="stylesheet" type="text/css" href="css/layerBoard.css" media="all" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/jquery.cookie.js"></script> <script src="js/jquery.layerBoard.js"></script> <script> $(function(){ $('#layer_board_area').layerBoard({alpha:0.5}); }) </script> |
<head>内に記述しています。
レイヤーの背景色等を変更したい場合は「layerBoard.css」を変更してください。
|
1 2 3 4 5 6 7 8 9 |
<!-- layer_board --> <div id="layer_board_area"> <div class="layer_board_bg"></div> <div class="layer_board"> <p><a href="http://www.yahoo.co.jp" target="_blank"><img src="img/img.jpg" /></a></p> <p class="btn_close"><a href="#"><img src="img/bnt_close.png" alt="close" width="63" height="12" /></a></p> </div> </div> <!-- //layer_board --> |
HTMLは上記の通りです。
id名の「id=”layer_board_area”」は変更可能です。
変更した場合は、下記<script>内のid名を変更してください。
|
1 |
$('#layer_board_area').layerBoard(); |
「class=”layer_board_bg”」「class=”layer_board”」「class=”btn_close”」のclass名は変更不可です。
|
1 |
<p class="layer_board_btn"><a href="#">もう一度開く</a></p> |
「class=”layer_board_btn”」は、クリックすると指定時間に関係なくモーダルをひらくことができるボタンです。
「class=”layer_board_btn”」のclass名は変更不可です。
オプション
オプションの「limitMin」で、再び表示するまでの時間を設定できます。
| オプション | 内容 | デフォルト値 |
|---|---|---|
| delayTime | 表示までの待ち時間 | 200 |
| fadeTime | 表示のフェード時間 | 500 |
| alpha | レイヤーの透明度 | 0.5 |
| limitMin | 何分経過後に再度表示するか | 1 |
| easing | イージング | linear |
| limitCookie | cookie保存期間 | 1日 |
オプション追加例
|
1 2 3 4 5 6 7 8 |
$('#layer_board_area').layerBoard({ delayTime: 1000, fadeTime : 1000, alpha : 0.8, limitMin : 5, easing: 'swing', limitCookie : 10 }); |