サイトに訪れるたびに表示されるのではなく、1日に1回、日付が変わるごとに表示されるポップアップの実装方法についてメモ
方法
- 初回アクセス時はポップアップモーダルを表示し、cookieを利用してその日の23:59:59まで再度表示されないようにmax-ageプロパティで制御する。
- 単純に24時間後のほうが良ければ、max-age=86400とすればOK。(JavaScript内のコメントにも記載)
HTML
<div id="js_modal" class="modal"> <div class="js_modal_close modal_bg"></div> <div class="modal_wrap"> <a class="js_modal_close modal_close"> 閉じる </a> <div class="modal_inner"> ポップアップの内容が入ります。 </div> </div> </div>
JavaScript
window.onload = function() { // cookieを配列に格納する const cookieArray = new Array(); if(document.cookie != ''){ const tmp = document.cookie.split('; '); for(let i=0;i<tmp.length;i++){ const data = tmp[i].split('='); cookieArray[data[0]] = decodeURIComponent(data[1]); } } // cookieの配列からmodalBrowseを取得する const modalBrowse = cookieArray["modalBrowse"]; const modal = document.getElementById("js_modal"); // modalBrowseが無い場合のみモーダルを表示しつつ今日の23:59:59を期限にしたcookieをセット if (!modalBrowse) { modal.classList.add("is_active"); const date = new Date(); const todayEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59); const dateTime = date.getTime(); const todayEndTime = todayEnd.getTime(); const remainingTime = Math.ceil((todayEndTime - dateTime) / 1000); document.cookie = 'modalBrowse=allready; max-age=' + remainingTime; // ▼ 24時間後でよければ、下記1行でOK // document.cookie = 'modalBrowse=allready; max-age=86400'; // 86400秒 } // 閉じるボタン const modalClose = document.getElementsByClassName('js_modal_close'); for( var i = 0; i < modalClose.length; i++ ) { modalClose[i].onclick = function () { modal.classList.remove("is_active"); } } }
CSS
.modal { width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9999; align-items: center; display: none; } .modal.is_active { display: flex; } .modal_bg { background-color: rgba(0, 0, 0, 0.5); width: 100%; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9998; } .modal_wrap { text-align: right; width: 100%; margin: 0 auto; padding: 20px; z-index: 10000; position: relative; } .modal_inner { background-color: #fff; text-align: left; padding: 30px 30px 40px; font-size: 16px; } .modal_close { color: #fff; font-size: 32px; position: absolute; top: -30px; right: 18px; }