【jQuery】初回アクセス時のみポップアップ表示(jquery.cookie.js使用)

jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの1回だけ画面全体にLightbox風のオーバレイポップアップ画面を表示させる方法をご紹介します。
※2019.4.15 一部ご指摘を受けたためコードを修正しました。
DEMO
プログラムの動作デモページを用意しました。下記リンク先をご確認下さい。
» 初回アクセスのときのみポップアップ画面を表示させるサンプル
設置方法
jQuery本体・jquery.cookie.jsの読み込み
どちらもCDNで配布されています。下記コードをそのまま<head>内に記述します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
jQuery実行コード
こちらのコードをjQuery本体・jquery.cookie.jsよりも下部に記述します。
<script type="text/javascript"> $(function(){ $(".overlay").show(); $.cookie('btnFlg') == 'on'?$(".overlay").hide():$(".overlay").show(); $(".btn_area button").click(function(){ $(".overlay").fadeOut(); $.cookie('btnFlg', 'on', { expires: 30,path: '/' }); //cookieの保存 }); }); </script>
HTML
<body>タグ直下に記述します。中のテキストやクラス名は適宜変更してください。
<div class="overlay"> <div class="btn_area"> <p>下記のOKボタンを押してからブラウザを「更新」してみてください。表示されなくなるはずです。</p> <button>OK</button> </div> </div>
CSS
こちらも既存クラスなどの状況に合わせてカスタマイズしてください。
※いちばん大枠の.overlayはdisplay:fixedで固定しているので、その親要素にdisplay:relativeやabsolute などを入れて下さい(デモではbody要素にrelativeを追加しています。)
.overlay{ display:none; width:100%; height:100%; background: rgba(0,0,0,0.6); position:fixed; z-index:1; } .btn_area{ width:300px; height:150px; position:absolute; top:50%; left:50%; margin-top:-75px; margin-left:-150px; background-color:#fff; z-index:2; } .btn_area p{ padding:15px; } .btn_area button{ display:block; margin:0 auto; }
以下、各コードの簡単な解説
jQuery実行コードの部分
<script type="text/javascript"> $(function(){ $(".overlay").show(); $.cookie('btnFlg') == 'on'?$(".overlay").hide():$(".overlay").show(); $(".btn_area button").click(function(){ $(".overlay").fadeOut(); $.cookie('btnFlg', 'on', { expires: 30,path: '/' }); //cookieの保存 }); }); </script>
3行目は初回アクセスか否かの判別をするため、cookieのbtnFlgキーに’on’という値が入っているかを判別しています。if文をショートハンドで記述しているので少し分かり辛いですが、値があればjQueryのhide関数で非表示に、無ければ初回と判断されshow関数でoverlayクラスを表示させます。
6行目はボタンをクリックした際の動作として、cookieに’on’の値を入れています。jquery.cookie.jsの記述として保存期間は30日、対象範囲は”/”でサイト全体を指定しています。
まとめ
そこまで使用頻度は多くないようで、意外と使いどころはあります。たとえばネットショップのサイトで初回アクセスのときだけ表示させたいクーポンや会員登録へ促すバナー、重要なお知らせを表示させる際など注目度は抜群です(その分離脱も多くなる諸刃の剣だと個人的には思いますが)。ほかにはサイトの「のれん」として置いたり、いかようにもなるのでコードをメモってまとめて置いておくのも良いですね。
コードの間違い、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。
ディスカッション
コメント一覧
2019年2月19日にご指摘いただいてる内容と同じになってしまうのですが、こちらやはり2度目以降は一瞬バナーが表示される挙動になってしまいます。
こちらの記事、参考にさせていただいてとてもスムーズに実装できました。感謝しております。
ただ、なぜかボタンがクリックできない?クリックしてもポップアップが消えない症状が直せなくて悩んでいます。
何か実装の不備で考えられることはあるでしょうか?
アシスタントM様
当記事のコード実装、コメント誠にありがとうございます!
当記事通りのコードでしたら、閉じるボタンに関しては
.btn_areaクラス内の、button タグをクリックすると閉じるように組んでいます。
jQuery実行コード内の5行目あたり、セレクタ「$(“.btn_area button”)」部分を
アシスタントM様が実装したHTMLコードに合わせて改変するか、
HTML側をデモと同じように .btn_areaクラスで囲ったbuttonタグにしていただければ、閉じることができます。
一度ご検討下さい。宜しくお願いいたします。
シンプルなコードでカスタマイズもしやすいです。
こちらをレスポンシブ対応にする方法も開発していただけるととても嬉しいです。
デジタルの波様
コメントありがとうございます。
こちらのテーマの不具合か、コメントが複数の記事に出てしまいます。
いずれ修正いたします。ありがとうございます。
レスポンシブ対応に関しましてはまた検討してみますね。ありがとうございます。
シュウさん
ご返信ありがとうございます。
誤ってコメントを何度も送りましてご迷惑をおかけしました。
レスポンシブのご検討よろしくお願いいたします。
初回訪問時はいいのですが、二回目以降の訪問時には、一瞬表示されて消えるというちょっと気になる動作になってしまいました。うーん
コメントありがとうございます。
実は僕自身も他のサイトなどにこのコードを導入していまして、ご指摘の一瞬表示される件を確認しています。
ちょっと時間が空きましたらコードを修正して編集しようと思います。ありがとうございました。
コードを修正させていただきました。
CSSでオーバレイ全体をdisplay:noneにし、javascript実行時にshowすることで回避できるようになりました。ありがとうございます。