一、使用前提
- 运行环境：任意支持 HTML/CSS/JavaScript 的网页环境（静态 HTML、PHP、Python Web、Vue/React 等前端框架均可）
- 浏览器兼容：支持现代主流浏览器（Chrome、Edge、Firefox、Safari 10+），IE 浏览器不支持（无兼容必要）
- 无额外依赖：无需引入 jQuery、Vue 等第三方库，原生 JS 实现，开箱即用
二、快速部署步骤
步骤 1：复制代码
将完整的弹窗代码（HTML+CSS+JS）复制到你的网页中，推荐放置在 <body> 标签的末尾（</body> 之前），避免阻塞页面加载。
步骤 2：嵌入到网页
场景 1：静态 HTML 文件
直接将代码粘贴到 HTML 文件的 <body> 末尾即可，示例：
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你的网页标题</title>
<!-- 其他样式/脚本 -->
</head>
<body>
<!-- 你的网页内容 -->
<h1>欢迎访问我的网站</h1>
<!-- 粘贴弹窗代码到这里 -->
<!-- 【弹窗代码开始】 -->
<!-- （复制完整的弹窗HTML+CSS+JS代码） -->
<!-- 【弹窗代码结束】 -->
</body>
</html>
场景 2：动态网页（PHP/Node.js/Java 等）
将弹窗代码作为独立模块嵌入到页面模板的 <body> 末尾，例如 PHP：
运行
<!-- 你的页面内容 -->
<?php include 'header.php'; ?>
<!-- 嵌入弹窗代码 -->
<div id="notice-modal">...</div>
<style>...</style>
<script>...</script>
<?php include 'footer.php'; ?>
步骤 3：测试验证
- 保存文件后，用浏览器打开网页；
- 页面加载后 500 毫秒会自动弹出抽奖弹窗；
- 等待 6 秒倒计时结束后，可点击 “×” 或 “收到啦～辛苦啦💗” 关闭弹窗；
- 关闭后当天刷新页面，弹窗不会重复显示（本地存储记忆功能）。
三、核心功能说明
表格
| 功能点 | 详细说明 |
|---|---|
| 自动弹出 | 页面加载完成后延迟 500ms 自动显示（仅当天首次访问 / 未关闭过弹窗时） |
| 倒计时限制 | 弹窗打开后 6 秒内关闭按钮不可点击，防止用户立即关闭，提升信息曝光率 |
| 本地存储记忆 | 按域名隔离，关闭弹窗后记录日期，当天内不再重复弹出 |
| 多方式关闭 | 支持 3 种关闭方式：关闭按钮、确认按钮、ESC 键、遮罩层点击（倒计时结束后） |
| 响应式适配 | 移动端自动适配宽度（95%），PC 端最大宽度 500px，适配不同屏幕 |
| 暗黑模式兼容 | 检测页面是否开启暗黑模式（.dark 类），自动切换弹窗样式 |
| 丰富动画效果 | 包含淡入淡出、滑入、心跳、流光、浮动等动画，提升视觉体验 |
| 兼容性处理 | 兼容 localStorage 隐私模式报错，避免代码崩溃 |
四、自定义修改指南
1. 修改文字内容
表格
| 要修改的内容 | 修改位置（代码行 / 区域） |
|---|---|
| 弹窗标题（饺子） | 找到 <span>💖 饺子有话说～</span>，替换 “饺子” 为任意文字 |
| 弹窗提示语 | 找到 <div>⚠️ 宝子们注意啦！免费抽奖开启啦！</div>，修改提示语内容 |
| 抽奖规则 / 说明 | 找到 .content-block 内的文本，按需修改规则、福利描述等 |
| 确认按钮文字 | 找到 <span id="confirm-text">收到啦～辛苦啦💗</span>，替换按钮文字 |
2. 修改抽奖地址
找到代码中这行链接，替换href和显示文本为你的抽奖地址：
预览
<a href="https://www.yykbk.com/choujiang" style="color: #fb7299; text-decoration: none; font-weight: 600;">https://www.yykbk.com/choujiang</a>
3. 修改倒计时时长
找到代码中这行常量，修改数值（单位：秒）：
运行
const COUNTDOWN_SECONDS = 6; // 改为3则倒计时3秒，改为10则倒计时10秒
4. 修改弹窗颜色
找到弹窗头部背景渐变代码，替换颜色值（支持 16 进制 / RGB）：
预览
<div style="background: linear-gradient(90deg, #fb7299, #fca5c2); ...">
<!-- 例如改为蓝色渐变：linear-gradient(90deg, #409eff, #66b1ff) -->
5. 修改弹窗弹出延迟
找到代码中这行，修改数值（单位：毫秒）：
运行
setTimeout(showModal, 500); // 500=0.5秒，改为1000则1秒后弹出，改为0则立即弹出弹窗功能代码如下
文章很赞,支持一下吧~
还没有人为TA充电
为TA充电
付费阅读
© 版权声明
本站解压密码 yykbk.com|www.yykbk.com
16571988@qq.com
|
Copyright © 2025~2026
01
DISCLAIMER
本站资源大多来自网络，如有侵犯权益请联系管理员，我们会第一时间审核删除。站内资源仅供学习测试，未经许可禁止商用，请在24小时内删除。
02
VIP PRIVILEGE
遇到付费内容？升级终身VIP即可全站免费畅享所有资源，可以联系我的QQ或者邮箱进行开通。
优源库博客QQ 群：901280286
THE END
暂无评论内容