如何修改JavaScript弹窗代码实现每日仅显示一次弹窗？

你可以通过Cookie记录用户当日是否已查看弹窗，将Cookie过期时间设为当日午夜，即可实现每日仅展示一次的效果。修改后的完整代码如下：

HTML部分（保留原结构） #

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div id="myModal" class="modal fade" style="padding-top:30%;">
  <div class="modal-dialog">
    My Content of pop up is here.
  </div>
</div>

JavaScript部分（修改核心逻辑） #

$(document).ready(function() {
  // 检查是否存在当日已查看弹窗的Cookie
  if (!getCookie("hasSeenModal")) {
    $("#myModal").modal('show');
    // 设置Cookie，过期时间为当日23:59:59
    setModalCookie();
  }
});

// 读取指定名称的Cookie
function getCookie(name) {
  let value = "; " + document.cookie;
  let parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}

// 设置弹窗Cookie，有效期至当日结束
function setModalCookie() {
  let now = new Date();
  // 将时间设置为当日最后一秒
  now.setHours(23, 59, 59, 999);
  document.cookie = "hasSeenModal=true; expires=" + now.toUTCString() + "; path=/";
}

关键说明 #

• getCookie：负责读取Cookie，判断用户今日是否已经看过弹窗。
• setModalCookie：创建名为hasSeenModal的Cookie，把过期时间设为当日午夜，过了这个时间Cookie会自动失效，次日打开页面会重新触发弹窗。
• path=/：确保Cookie在整个网站根路径下生效，避免不同页面路径导致Cookie不共享的问题。

内容的提问来源于stack exchange，提问作者Higgs Boson