初回訪問時のみダイアログ表示

GDPR対策とかなんとかで、初回訪問時のみダイアログを表示する機会も増えてるようなのでまとめてみます。

HTML

<div class="once_dialog">
  ...内容
  <div class="once_dialog__close"><span>閉じる</span></div>
</div>

CSS

.once_dialog {
  display: none;
}

.once_dialog.is-active {
  display: block;
}

jQuery

(function ($) {
  const onceDialog = 'once_dialog';
  const onceDialogActive = 'is-active';
  const onceDialogAccessFlg = 'my_access';
  const onceDialogAccessAge = 2592000;

  const footerDialogLoad = () => {
    if ($(`.${onceDialog}`).length && !document.cookie.includes(onceDialogAccessFlg)) {
      $(`.${onceDialog}`).addClass(onceDialogActive);
    }
  }

  const footerDialogSet = () => {
    document.cookie = `${onceDialogAccessFlg}=1; path=/; max-age=${onceDialogAccessAge}`;
    $(`.${onceDialog}`).removeClass(onceDialogActive);
  }

  $(window).on('load', footerDialogLoad);

  $(`.${onceDialog}__close`).on('click', footerDialogSet);
});

ページ読み込み完了時にcookie([onceDialogAccessFlg]でcookie名指定)があるか判定して、なかったら表示します。
閉じるボタンを押すと該当のcookieが保存されるので、閉じるボタンを押されるまでは何度も表示されます。
上記の例では、cookieの保存期間30日間、サイトのルートは以下全体を有効範囲としています。これは適宜調整してください。

カテゴリー : 技術・小ネタ

COMMENT FORM

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です。

※送信の前にプライバシーポリシーを必ずご確認ください。