关键在表单提交逻辑与后端衔接：跨域POST受CORS限制，Mailchimp等需特定URL参数、header及字段名，double opt-in须用户邮件确认，弹窗须用户手势触发且状态需同步清理。
直接用 HTML + 简单 JS 就能做出可用的邮件订阅弹窗，但真要稳定收得到用户邮箱、不被当垃圾邮件、且不被浏览器拦截，关键不在“弹出来”，而在表单提交逻辑和后端衔接——纯前端静态页面无法完成订阅动作。
为什么 form 提交到 action 地址会失败
常见做法是写一个 <form action="https://your-api.com/subscribe">，但现代浏览器对跨域 POST 有严格限制；若目标地址不是同源，且对方没配 Access-Control-Allow-Origin，就会报 CORS error。更麻烦的是：很多邮件服务（如 Mailchimp、ConvertKit）明确要求用它们提供的 POST 路径或 JS SDK，不能直接裸写 form 提交。
- Mailchimp 的公开表单 endpoint 是带
u=xxx&id=yyy参数的，必须保留完整 query string，删掉就 400 - ConvertKit 要求 header 带
X-Requested-With: XMLHttpRequest，否则拒绝 - 纯静态页（
file://或 GitHub Pages）连fetch都可能被 CORS 拦住，得走代理或用它们的托管表单
用 fetch 提交但收不到邮件？检查这三点
即使你写了 fetch()，用户点了“订阅”却没收到确认邮件，大概率是后端没触发发送流程，或者验证环节被跳过。
- 确认是否启用了 double opt-in（双重确认）：多数合规邮件服务默认开启，用户必须点邮件里的链接才算真正订阅，前端只负责提交，不负责发信
- 检查
Content-Type：Mailchimp 要application/x-www-form-urlencoded，不是application/json；传 JSON 会静默失败 - 字段名必须完全匹配：比如 Mailchimp 要
EMAIL（全大写），写成email或userEmail就存不进列表
示例正确提交（Mailchimp）：
立即学习“前端免费学习笔记（深入）”；
fetch('https://us1.list-manage.com/subscribe/post?u=abc123&id=def456', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({ 'EMAIL': emailInput.value, 'b_abc123_def456': '' })
});
弹窗本身被浏览器屏蔽？别用 window.open 或自动 setTimeout
Chrome 和 Safari 对非用户手势触发的弹窗（比如页面加载 3 秒后自动弹）直接拦截，尤其在移动设备上几乎 100% 失效。
- 必须由用户真实点击触发：比如「立即订阅」按钮的
onclick里调用showModal()或切换 class - 避免在
DOMContentLoaded或load事件里直接显示，哪怕加了 100ms 延迟也不行 - 用原生
<dialog>元素比绝对定位 div 更可靠，支持showModal()方法且不易被误判为广告
最易被忽略的一点：弹窗关闭后，别把输入框的 value 清空却不重置校验状态——用户第二次打开时看到红色错误提示却没输内容，体验断层。校验逻辑和 DOM 状态要同步清理。
