弹窗广告—高曝光但需克制的类型

弹窗广告适合强推广场景（如限时活动），但需注意用户体验。

以下是一个延迟3秒弹出的弹窗示例：

<!-- html结构 -->
<div id="popup-ad" class="popup">
  <div class="popup-content">
    <span class="close-BTn">&times;</span> <!-- 关闭按钮 -->
    <h3>限时福利！全场5折起</h3>
    <p>活动仅剩24小时，点击领取优惠券 →</p>
    <a href="http://999603.xyz" class="popup-link">立即领取</a>
  </div>
</div>

<!-- css样式 -->
<style>
.popup {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /* 半透明遮罩 */
  z-index: 9999; /* 确保在最上层 */
}
.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background: white;
  border-radius: 10px;
  width: 80%;
  max-width: 400px;
}
.close-BTn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
}
</style>

<!-- javaScript控制 -->
<script>
// 页面加载3秒后显示弹窗
setTimeout(() => {
  document.getElementById('popup-ad').style.display = 'block';
}, 3000);

// 点击关闭按钮隐藏弹窗
document.querySelector('.close-btn').addEventListener('click', () => {
  document.getElementById('popup-ad').style.display = 'none';
});

// 点击遮罩层也可关闭（可选）
document.querySelector('.popup').addEventListener('click', (e) => {
  if (e.target === e.currentTarget) {
    document.getElementById('popup-ad').style.display = 'none';
  }
});
</script>

注意事项：

延迟触发（如3秒后）避免干扰用户初始浏览；

提供明显关闭按钮（符合WCAG可访问性标准）；

移动端需调整 max-width 防止内容溢出。