弹窗广告—高曝光但需克制的类型
以下是一个延迟3秒弹出的弹窗示例:
<!-- html结构 --> <div id="popup-ad" class="popup"> <div class="popup-content"> <span class="close-BTn">×</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 防止内容溢出。



