初回訪問時時間経過後にモーダルウィンドウを表示

Question

お世話になります。

弊社本店サイトにて、何分かサイト滞在しているお客様に向けて、
モーダルウィンドウを表示することを行おうとしております。
https://www.4860.jp/sp/sub/test/

何分か滞在し、モーダルウィンドウを表示することは出来たのですが、
更新する度にモーダルウィンドウが表示されてしまいます。

初回アクセス時の場合、何分か後にモーダルウィンドウを表示し、
翌日まで表示しないようにするには、どのような設定を行えばよろしいでしょうか。

モーダルウィンドウと訪問状態の保持を組み合わせた
記述方法がございましら、ご教示のほどよろしくお願いします。

▼htmlとJavaScriptの記述になります▼

  1分後にmodalが表示されます
  
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
  
  
    
      
        
          ご来店ありがとうございます
          当店へのご意見・ご要望をお聞かせください
          ご意見・ご要望
          ×
        
    
  
  
  
  
    $('#modal-overlay').hide();  // モーダルは最初は非表示
    const scrollPos = $(window).scrollTop();  // モーダル表示前のスクロール位置を取得

    setTimeout(() => {  // 一定時間経過後に
    $('#modal-overlay').fadeIn(400);  // 0.4秒かけてモーダルを表示
    $('body').css({position: 'fixed', top: -scrollPos, left: '0'});  // オーバーレイ背面のbodyを固定（スクロール制御）
    },15000);  // 一定時間を1分(60000ミリ秒）に設定

    $('button, .modal-mask').click(function() {  // モーダルの右上の閉じる（×）ボタン、若しくはモーダルのオーバーレイをクリックしたら
    $('#modal-overlay').fadeOut(400);  // 0.4秒かけてモーダルを非表示
    $('body').css({position: '', top: '', left: ''});  // 背景の固定解除
    $(window).scrollTop(scrollPos);  // スクロール位置を元に戻す
    });

Answer

ECマスターズの土屋です。

大変申し訳ございません。

只今投稿返信させて頂きました投稿に
誤りがございましたので、

投稿を修正し再度ご返信させて頂きますので、
しばらくお待ち下さい。

Answer

ECマスターズの土屋です。

大変申し訳ございません。

デバッグコードが残っており、
コードを只今修正しておりますので
今しばらくお待ち下さい。

Answer

ECマスターズの伊藤です。

大変おまたせしてしまい、申し訳ございません。

>初回アクセス時の場合、何分か後にモーダルウィンドウを表示し、
>翌日まで表示しないようにするには、どのような設定を行えばよろしいでしょうか。

ブラウザに「cookie」というデータを有効期限を設けて
保存し、cookieが「存在するか」、「しないか」
で条件分岐を行い実装していきます。

>モーダルウィンドウと訪問状態の保持を組み合わせた
>記述方法がございましら、ご教示のほどよろしくお願いします。

事務局側で、ソースコードをご用意させていただきました。
こちらをご参考にして頂きますと幸いです。

また、
「document.cookie = 'modal=ready; max-age= ' + remainingTime;」
こちらの値ですが、
「setTimeout(() => ｛」
の次に記載しますと、
モーダルが表示された際、その日の終了時刻まで表示されなくなり、
下記の処理の次に記載された場合ですと
「 $('button, .modal-mask').click(function () {」
閉じるボタンをクリックした際に
モーダルがその日の終了時刻まで表示されなくなります。

記述する箇所により、処理内容が異なりますので
ご注意頂けますと幸いです。

今回は、モーダルが表示された際に
その日の終了時刻まで表示されない処理にしてありますので
必要に応じて手直しして頂けますと幸いです。

どうぞよろしくお願いします。



function cookieArr() {
let arr = [];
if (document.cookie != '') {
var tmpdata = document.cookie.split('; ');
for (var i = 0; i < tmpdata.length; i++) {
var data = tmpdata[i].split('=');
arr[data[0]] = decodeURIComponent(data[1]);
}
}
return arr;
}

if (cookieArr().modal !== 'ready') {
// 現在の時刻
const date = new Date();
// 本日の23:59:59を取得
const todayEnd = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 23, 59, 59);

const dateTime = date.getTime();
//本日の23:59:59をミリ秒に変換
const todayEndTime = todayEnd.getTime();
// 四捨五入して本日の23:59まで残りを取得
const remainingTime = Math.ceil((todayEndTime - dateTime) / 1000);

setTimeout(() => { // 一定時間経過後に
document.cookie = 'modal=ready; max-age=' + remainingTime;
$('#modal-overlay').fadeIn(400); // 0.4秒かけてモーダルを表示
$('body').css({ position: 'fixed', top: -scrollPos, left: '0' }); // オーバーレイ背面のbodyを固定（スクロール制御）
}, 60000); // 一定時間を1分(60000ミリ秒）に設定

$('button, .modal-mask').click(function () { // モーダルの右上の閉じる（×）ボタン、若しくはモーダルのオーバーレイをクリックしたら
$('#modal-overlay').fadeOut(400); // 0.4秒かけてモーダルを非表示
$('body').css({ position: '', top: '', left: '' }); // 背景の固定解除
$(window).scrollTop(scrollPos); // スクロール位置を元に戻す
});
}

初回訪問時 時間経過後にモーダルウィンドウを表示

初回訪問時時間経過後にモーダルウィンドウを表示