网页加载弹窗时锁定浏览器，需用户接受/拒绝后才可交互

嘿，这个需求完全可以实现！本质上就是做一个强制模态弹窗，搭配全屏遮罩层来锁住整个页面，用户必须点击「接受」或「拒绝」才能解除限制。下面是具体的实现思路和代码：

核心实现思路 #

• 用全屏遮罩层覆盖整个页面，阻止用户点击遮罩层外的所有内容
• 弹窗置于遮罩层上方，隐藏/禁用默认关闭按钮（比如叉号）
• 监听键盘ESC键，阻止其触发关闭弹窗的默认行为
• 禁用页面滚动，避免用户绕开弹窗查看遮罩层后的内容

完整代码示例 #

HTML 结构 #

<!-- 全屏遮罩层 -->
<div id="overlay"></div>

<!-- 强制弹窗 -->
<div id="modal">
  <div class="modal-content">
    <h3>隐私政策确认</h3>
    <p>请确认是否接受我们的隐私政策，否则无法继续访问本网站。</p>
    <div class="modal-buttons">
      <button id="acceptBtn">接受</button>
      <button id="rejectBtn">拒绝</button>
    </div>
  </div>
</div>

CSS 样式 #

/* 全局样式重置，避免页面边距影响 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 全屏遮罩层 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  /* 阻止遮罩层点击穿透到页面 */
  pointer-events: auto;
}

/* 弹窗容器 */
#modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  /* 确保弹窗始终在最上层 */
  pointer-events: auto;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}

.modal-content h3 {
  margin-bottom: 1rem;
  color: #333;
}

.modal-content p {
  margin-bottom: 1.5rem;
  color: #666;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.modal-buttons button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

#acceptBtn {
  background-color: #2ecc71;
  color: white;
}

#rejectBtn {
  background-color: #e74c3c;
  color: white;
}

/* 禁用页面滚动 */
body.modal-locked {
  overflow: hidden;
}

JavaScript 逻辑 #

// 获取页面元素
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
const acceptBtn = document.getElementById('acceptBtn');
const rejectBtn = document.getElementById('rejectBtn');

// 页面加载时自动锁定页面
document.body.classList.add('modal-locked');

// 监听ESC键，阻止关闭弹窗
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    e.preventDefault();
  }
});

// 「接受」按钮点击事件
acceptBtn.addEventListener('click', () => {
  // 移除遮罩和弹窗
  overlay.style.display = 'none';
  modal.style.display = 'none';
  // 解锁页面滚动
  document.body.classList.remove('modal-locked');
  // 这里可以添加接受后的自定义逻辑，比如设置cookie、初始化页面等
  alert('您已接受隐私政策，现在可以正常访问网站了！');
});

// 「拒绝」按钮点击事件
rejectBtn.addEventListener('click', () => {
  // 这里可以添加拒绝后的自定义逻辑，比如跳转至其他页面
  alert('您已拒绝隐私政策，将为您跳转至外部页面');
  window.location.href = 'about:blank'; // 示例：跳转到空白页
});

// 阻止点击遮罩层关闭弹窗
overlay.addEventListener('click', (e) => {
  e.stopPropagation();
});

额外说明 #

• 这种强制弹窗需要符合地区隐私法规要求（比如GDPR），避免过度限制用户权益
• 可以根据需求扩展功能，比如添加弹窗动画、用cookie记录用户选择（避免重复弹窗）等

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