初回訪問時のみダイアログ表示
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