「セール情報」や「重要なお知らせ」を、
モーダル（フロート）で目立たせたいという要望があったので、
ページのアクセス時にモーダル（フロート）を表示するjQueryプラグインを制作しました。
「jquery.layerBoard.js」は商用利用・改変・再配布可能です。
デモ
トップページのアクセス時にモーダルを表示させるプラグイン。
ダウンロード：layerboard.zip【111KB】
アクセスするとモーダルがひらきます。
次にアクセスしても指定した時間までひらきません。
デフォルトでは1分で、再びひらくようになっています。
再びひらくまでの時間は分単位で指定できます。
必要なファイル
必要なのは
jQueryとjquery.cookie.jsはサイトからダウンロードしてください。
jquery.layerBoard.jsは下記からダウンロードしてください。
ダウンロード：layerboard.zip【111KB】
ソース
[crayon]
[/crayon]
<head>内に記述しています。
レイヤーの背景色等を変更したい場合は「layerBoard.css」を変更してください。
[crayon]
[/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]
執筆者：KIYOTA
関連記事
-
-
デザイナーでもJavaScriptやjQueryが必ず上達する3つのコツ
SPONSORED LINK いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJavascript、せめてjQueryは使えないと 厳しい時代です。 JavaScr …
-
-
スクロールしたら「トップへ戻る」ボタンを表示するプラグインjquery.pageTopButton.js
SPONSORED LINK Wordpressによくある スクロールしたら「トップへ戻る」ボタンを表示するプラグインをいれたけど、 うまく動かなかったので作った方がはやいので作ってみました。 このブ …
-
-
ドロワーメニューの「simple-sidebar」の簡単なサンプル
SPONSORED LINK simple-sidebar スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。 サンプル通りに作っても、つまづいたので、備忘録代わりに簡単な …
-
-
SPONSORED LINK jMosaic 写真の高さなどを自動的にリサイズしてタイル状に並べてくれるjQuery「jMosaic」です。
-
-
SPONSORED LINK jQueryを使っていると、知っているものや、よく使うものしか使わなくて、意外と知らないイベントやセレクタがあったりします。 jQuery Cheat Sheet こちら …
こんにちは！
小さなベンチャーでWEBディレクターをしている者です。
非常に便利なプラグインを無料で使わせて頂いており、
大変感謝しております…！
このモーダルのお陰で、実際に販促効果もでており、
当社の販促では欠かせない存在になっています。
本当に有難うございます！
その上で…1点だけ質問させて下さい。
（すみません！）
■ やりたいこと
￣￣￣￣￣￣￣￣￣
この度、モーダルの表示内容を
新しいものに差し替える事になりました。
そこで、早く多くの人に見てもらうために
以下のような事を行いたいと思っています。
————————————————-
・差し替え以降の初回アクセス時：
→残っているcookieに関わらず、
全員に「差し替え後の内容」を必ず表示
・それ以降のアクセス：
→limitMinで設定した時間が経過したら、表示
————————————————-
つまり、旧内容のcookieを無視して、
新しい内容をすぐに表示させたいと思っています。
■ 考えている方法
￣￣￣￣￣￣￣￣￣
素人考えですが。。。
「jquery.layerBoard.js」内のcookie名を新しいものに書き換えれば、
上記の事が可能なのかな？と思いました。
（例：layerBoardTime→layerBoardTime0521 など）
しかし、他にもっと良い方法があるかもしれない、
と思い、ご相談させて頂きました。
—-
お忙しいところ申し訳ありません！
お手すきの時にでも、お気付きの点などあれば、
アドバイス頂けますと幸いです。
どうぞ宜しくお願い致します。
つぐみ様
ご利用ありがとうございます！お役にたててうれしいです！
>「jquery.layerBoard.js」内のcookie名を新しいものに書き換えれば、
>上記の事が可能なのかな？と思いました。
>（例：layerBoardTime→layerBoardTime0521 など）
ご指摘の通りcookie名を変更するのが、一番手っ取り早いと思います。
うまくいかないようでしたら、またお知らせください
早々のご返信ありがとうございました！
大変助かりました…！
早速、上記の方法で試してみたいと思います。
本当に便利なプラグインを提供して頂き、
どうも有難うございます。
はじめまして。
WEBデザイナーをしておりますyukiといいます。
お客さまから
「トップページアクセス時に告知を表示させたい」という
ご要望があり、こちらにたどり着きました。
使いやすいプラグインをありがとうございます。
JavaScript初心者の自分でも設置できて感激でした！
すみません・・もし、方法がありましたら教えていただきたいのですが、
CLOSEボタンや背景をクリックせずに、
時間指定でモーダルウインドウを自動的に閉じる方法はあるのでしょうか。
どうぞよろしくお願いいたします。
ありがとうございます。
ざっくりですが、setTimeoutを使えば、指定秒数で自動的に閉じます。
3000=3秒後に閉じるには以下の感じです。
$(‘#layer_board_area’).layerBoard({alpha:0.5});
// 3秒後に自動的に閉じる
setTimeout(function(){
$(‘#layer_board_area .layer_board ,#layer_board_area .layer_board_bg’).fadeOut(200);
},3000);
})
参考になればと思います。
早々に返信いただきをありがとうございました。
無事に設置できました！
今後も愛読せさていただきます！
こちらのブラグインを利用させていただいております。
とても使いやすく助かっております。
さて、本来の趣旨とは異なるのですが
アクセスした際にはモーダルを開かず、
もう一度開く
だけを使用することは可能なのでしょうか？
お手すきのときにでもお教えいただけますと
幸いです。よろしくお願いします。
便利なプラグイン大変便利に使わせていただいております！
ありがとうございます。
その上で、次にこのサイトをご覧になる方のために、
私が悩んだところを記載させていただきます。
「limitMin」の指定なのですが、
ローカルにファイルを置き、確認すると、
指定した通りに動作してくれませんでした。
今思えば、サーバーがもっている時間をCookieが記録・参照しているのだろうから、当然か…と思ってますが、ローカルで確認される方はお気をつけ下さい。
この考えで行くと、「limitCookie」もローカルじゃ指定した通りに動作しませんね。
はじめまして。広告の掲載目的に使用させていただいております。
どうしても上手くいかないことがありましたので、質問させていただきます。
現状、スマートフォンで閲覧される事が多いので、縦サイズ1500px前後の画像を用意して表示させておりますが、PCでの閲覧や、解像度の低いデバイスで表示させた際に、ハミ出てしまっています。
cssにてmax-heightなどを指定してみたものの、上手くいきません。
ウィンドウ内で表示させる画像をレスポンシブで拡大縮小する手法についてご教授お願いいたします。
こちらのモーダルを使わせて頂いておりますが、なぜかcloseボタンを押した後に正常に縦スクロールが出来なくて困っております。
ウインドウは出てくるので動作はしているんでが、いかんせんサイトの縦スクロールが出来ないので下の方を閲覧できなく、画面が固定されてしまっています。
見える範囲内でのバナーやボタン等は普通に反応するので不可解です。
[…] 参考サイト http://blog.idea-clippin.com/?p=129 […]
自作ホームページを作っている完全素人です。
突然、申し訳ございません。
トップページにこちらのjsを利用したモーダルを使っていたのですが、どうもページが重たく、他のプラグインも含めてjquery3.2.1に対応させたホームページに換装させようとしているのですがこのモーダルだけがうまく使えないのです…
何か良い対策はございますか？
初歩的な質問だとしたら申し訳ございません！
はじめまして。こちらを参考に初めてモーダルを作ってみました。
おかげさまで画像のモーダルはなんとか作成することができました。
ここで質問なのですが、この画像をyoutubeにある動画に変更するにはどのようにしたらいいのでしょうか？
ぜひ教えていただけませんでしょうか？
よろしくお願いします。
[…] 作ってくださった方はこの方。 ↓ 「jQuery.layerBoard.js」 http://blog.idea-clippin.com/?p=129 […]
[…] 詳細はこちら。 ↓ 「jQuery.layerBoard.js」 http://blog.idea-clippin.com/?p=129 […]
[…] FEVDES BLOG | 【簡単！】ページのアクセス時にモーダル（フロート）を表示するjQuery.layerBoard.js […]