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

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

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日、対象範囲は”/”でサイト全体を指定しています。

まとめ

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

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

jQuery//ライブラリ紹介カテゴリの最新記事

コメント

  1. なやめる より:

    初回訪問時はいいのですが、二回目以降の訪問時には、一瞬表示されて消えるというちょっと気になる動作になってしまいました。うーん

    1. シュウ より:

      コメントありがとうございます。
      実は僕自身も他のサイトなどにこのコードを導入していまして、ご指摘の一瞬表示される件を確認しています。

      ちょっと時間が空きましたらコードを修正して編集しようと思います。ありがとうございました。

      1. シュウ より:

        コードを修正させていただきました。
        CSSでオーバレイ全体をdisplay:noneにし、javascript実行時にshowすることで回避できるようになりました。ありがとうございます。

  2. デジタルの波 より:

    シンプルなコードでカスタマイズもしやすいです。
    こちらをレスポンシブ対応にする方法も開発していただけるととても嬉しいです。

    1. シュウ より:

      デジタルの波様

      コメントありがとうございます。
      こちらのテーマの不具合か、コメントが複数の記事に出てしまいます。
      いずれ修正いたします。ありがとうございます。

      レスポンシブ対応に関しましてはまた検討してみますね。ありがとうございます。

      1. デジタルの波 より:

        シュウさん
        ご返信ありがとうございます。
        誤ってコメントを何度も送りましてご迷惑をおかけしました。
        レスポンシブのご検討よろしくお願いいたします。

コメント

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください