お世話になります。

弊社本店サイトにて、何分かサイト滞在しているお客様に向けて、
モーダルウィンドウを表示することを行おうとしております。
https://www.4860.jp/sp/sub/test/

何分か滞在し、モーダルウィンドウを表示することは出来たのですが、
更新する度にモーダルウィンドウが表示されてしまいます。

初回アクセス時の場合、何分か後にモーダルウィンドウを表示し、
翌日まで表示しないようにするには、どのような設定を行えばよろしいでしょうか。

モーダルウィンドウと訪問状態の保持を組み合わせた
記述方法がございましら、ご教示のほどよろしくお願いします。

▼htmlとJavaScriptの記述になります▼

<p>1分後にmodalが表示されます</p>
<div class="text">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。<br>
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。
</div>
<div id="modal-overlay">
<div class="modal-mask"></div>
<div class="modal-container overlay">
<div class="modal-inner btn_area">
<div class="modal-title">ご来店ありがとうございます</div>
<div class="modal-text">当店へのご意見・ご要望をお聞かせください</div>
<button type="button" class="next-form" onclick="window.open('https://4860portal.zendesk.com/hc/ja/requests/new?ticket_form_id=4412687116697&utm_source=popup&utm_medium=form&utm_campaign=opinions')">ご意見・ご要望</button>
<button class="close">×</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.4860.jp/sp/contents/js/jquery.cookie.js"></script>
<script>
$('#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); // スクロール位置を元に戻す
});
</script>