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

2018年8月28日jQuery

jquery.cookieを使用して初回アクセスのときのみポップアップ表示

jquery.cookie.jsは、PHPなどの環境がなくてもcookieを取り扱うことができるとても便利なjQueryのライブラリです。今回はこちらを用い、初回アクセスの１回だけ画面全体に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日、対象範囲は”/”でサイト全体を指定しています。

まとめ

そこまで使用頻度は多くないようで、意外と使いどころはあります。たとえばネットショップのサイトで初回アクセスのときだけ表示させたいクーポンや会員登録へ促すバナー、重要なお知らせを表示させる際など注目度は抜群です（その分離脱も多くなる諸刃の剣だと個人的には思いますが）。ほかにはサイトの「のれん」として置いたり、いかようにもなるのでコードをメモってまとめて置いておくのも良いですね。

コードの間違い、もっと簡潔にできるなどアドバイスなどがありましたらコメントいただければ大変嬉しいです。宜しくお願いいたします。

jQuerycookie, jQuery, jquery.cookie.js, Lightbox

Posted by シュウ