Bootstrap模态框浏览器会话内仅弹出一次的功能异常排查

你的问题出在两个关键地方：没有检查Cookie是否存在就触发模态框，以及设置Cookie的代码语法错误，导致Cookie根本没被正确创建，所以每次刷新页面都相当于没有Cookie，模态框一直弹出。

问题根源拆解 #

1. 错误的Cookie设置代码：你用了setcookie("Logged")，这是PHP的函数，不是JavaScript的语法，浏览器根本识别不了，所以实际没有创建任何Cookie。
2. 缺少Cookie检查逻辑：不管用户有没有见过模态框，页面一加载就直接弹出，没有判断是否已经存在标记Cookie。

修正后的完整代码 #

把你原有的代码替换成下面这段，就能实现「每浏览器会话仅弹出一次」的需求：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Buy Product</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <a href="/itemlist.php"><img src="https://thumbs.dreamstime.com/z/promotion-vector-stamp-isolated-white-37908603.jpg" style="height:400px; width:450px;"></a>
      </div>
    </div>
  </div>
</div>
<script>
$(document).ready(function () {
  // 自定义函数：检查是否存在Logged会话Cookie
  function hasLoggedCookie() {
    // 拆分Cookie字符串，逐个检查是否包含Logged字段
    return document.cookie.split(';').some(function(cookie) {
      return cookie.trim().startsWith('Logged=');
    });
  }

  // 如果没有Logged Cookie，才弹出模态框并设置Cookie
  if (!hasLoggedCookie()) {
    $('#exampleModal').modal('show');
    // 设置会话Cookie（不指定expires，浏览器关闭时自动删除）
    document.cookie = "Logged=true; path=/";
  }
});
</script>

关键逻辑说明 #

• Cookie检查函数：hasLoggedCookie()会遍历当前所有Cookie，判断是否存在名为Logged的Cookie。
• 会话Cookie设置：document.cookie = "Logged=true; path=/"; 没有指定expires或max-age，所以这是一个会话Cookie，浏览器关闭后会自动删除，满足「重启浏览器后再次触发模态框」的需求。
• 路径设置：path=/确保这个Cookie在整个网站的所有页面都能被读取到，避免因页面路径不同导致Cookie无法识别的问题。

现在刷新页面时，浏览器会先检查是否有Logged Cookie，只有第一次加载（或重启浏览器后）才会弹出模态框，刷新页面不会重复弹出。

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