实现带弹窗提示的自动登出：弹窗显示时屏蔽键鼠活动

我来帮你搞定这个自动登出系统的收尾问题！你现在的核心需求是：弹窗显示期间，只有点击弹窗内的「Stay Logged In」按钮才能延续会话，其他页面操作（鼠标移动、滚动等）不能干扰倒计时。咱们来一步步调整代码：

核心修改思路 #

1. 新增一个状态变量isWarningActive，用来标记当前是否处于弹窗警告阶段
2. 在弹窗显示时，移除页面的活动监听（避免用户误操作重置计时器）
3. 重置计时器的逻辑只在非警告状态下响应页面活动，警告状态下仅响应按钮点击

修改后的完整代码 #

JavaScript 部分 #

// Set timeout variables.
var warningTimer;
var timeoutTimer;
var isWarningActive = false; // 新增：标记是否处于弹窗警告状态

function resetTimerByActivity() {
  console.log("resetTimerByActivity");
  // 只有非警告状态下，才添加页面活动监听
  if (!isWarningActive) {
    window.onmousemove = resetAutoLogoutTimer; // 鼠标移动
    window.onmousedown = resetAutoLogoutTimer; // 鼠标按下
    window.onclick = resetAutoLogoutTimer;     // 鼠标点击
    window.onscroll = resetAutoLogoutTimer;    // 滚动页面
    window.onkeypress = resetAutoLogoutTimer;  // 键盘输入
  } else {
    // 警告状态下，移除所有页面活动监听
    window.onmousemove = null;
    window.onmousedown = null;
    window.onclick = null;
    window.onscroll = null;
    window.onkeypress = null;
  }
}

// Start warning timer.
function startAutoLogoutTimer() {
  console.log("startAutoLogoutTimer");
  isWarningActive = false; // 初始状态为非警告
  warningTimer = setTimeout(autoLogoutIdleWarning, 30000); // 建议直接传函数，不要传字符串
  resetTimerByActivity();
}

// Reset timers.
function resetAutoLogoutTimer() {
  console.log("resetAutoLogoutTimer");
  window.location = '#';
  clearTimeout(warningTimer);
  clearTimeout(timeoutTimer);
  startAutoLogoutTimer();
}

// Show idle timeout warning dialog.
function autoLogoutIdleWarning() {
  console.log("autoLogoutIdleWarning");
  isWarningActive = true; // 标记进入警告状态
  clearTimeout(warningTimer);
  resetTimerByActivity(); // 调用后会移除页面活动监听
  timeoutTimer = setTimeout(AutoLogoutIdleTimeout, 10000); // 这里改成10秒，和提示文字保持一致
  window.location = '#popupLogoutWarning';
}

// Logout the user.
function AutoLogoutIdleTimeout() {
  console.log("AutoLogoutIdleTimeout");
  window.location = '/logout';
}

修改点说明：

• 把原来的inactivity变量换成更清晰的isWarningActive
• 移除了setTimeout里的字符串调用（直接传函数更安全规范）
• 警告状态下主动移除页面所有活动监听，确保只有按钮能触发重置
• 调整弹窗倒计时为10秒，和提示文字保持一致

Popup HTML 部分 #

<div id="popupLogoutWarning" class="popup-overlay">
  <div class="popup-popup">
    <h2>Auto-Logout</h2>
    <div class="popup-content" style="background:#e3f7fc;border:1px solid #8ed9f6;padding:20px;">
      <p>You will be logged out in ten seconds. Click "Stay Logged In" to prevent this.</p>
      <p><input type="button" name="autologoutStayLoggedIn" id="autologoutStayLoggedIn" value="Stay Logged In" class="admin-button" onclick="resetAutoLogoutTimer();" /></p>
    </div>
    <!-- 新增关闭按钮，点击后直接触发登出 -->
    <a href="#" class="popup-close" onclick="AutoLogoutIdleTimeout();">&times;</a>
  </div>
</div>

修改点说明：

• 新增了弹窗关闭按钮，点击后直接触发登出（符合逻辑：用户关闭警告弹窗，说明不想续期）

CSS 部分 #

.popup-box {
  width: 50%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}
.popup-button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid #06D85F;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
}
.popup-button:hover {
  background: #06D85F;
}
.popup-overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
  z-index: 9999999999;
}
.popup-overlay:target {
  visibility: visible;
  opacity: 1;
}
.popup-popup {
  margin: 70px auto;
  top: 100px;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 0.3s ease-in-out; /* 把5秒改成0.3秒，动画更自然 */
}
.popup-popup h2 { /* 修正标题选择器，对应HTML里的h2 */
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup-popup .popup-close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup-popup .popup-close:hover {
  color: #06D85F;
}
.popup-popup .popup-content {
  max-height: 50%;
  overflow: auto;
}

修改点说明：

• 调整了弹窗动画时长（5秒太长，改成0.3秒更流畅）
• 修正了标题选择器（HTML里是h2，原来CSS写的h3）

验证逻辑 #

1. 页面加载后调用startAutoLogoutTimer，开始30秒倒计时
2. 用户在页面操作（移动鼠标、滚动等），计时器会重置，重新开始30秒倒计时
3. 30秒无操作后，弹出警告弹窗，此时页面操作不再触发计时器重置
4. 点击「Stay Logged In」按钮，重置计时器，弹窗关闭，恢复页面操作监听
5. 弹窗显示期间10秒无按钮点击，自动跳转到/logout

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