弹窗这玩意儿，用好了是弹窗代码通知，用砸了是公告骚扰。HTML原生没有“弹窗”标签，弹窗代码但用<dialog>加上几行JavaScript，公告就能做出比alert()体面得多的弹窗代码公告框。我见过太多站点还在用浏览器自带alert——那个样式丑得让人想立刻关掉页面，公告而且阻塞线程，弹窗代码像极了十年前的公告老古董。

今天给你看一套能直接用的弹窗代码代码。它不是公告那种花里胡哨的库，就是弹窗代码纯原生，零依赖。公告结构分三层：触发按钮、弹窗代码遮罩层、公告弹窗本体。遮罩层用固定定位铺满视口，弹窗用flex居中，关闭按钮绑定click事件。

上面这个弹窗，打开后背景变暗，内容居中，右上角能关，底部按钮也能关。但它的核心不在视觉，而在触发方式。我故意没用onclick属性，全部走addEventListener——因为内联事件在真实项目里容易和CSP(内容安全策略)打架，而且维护起来是噩梦。

有人会问：“直接display:block显示不就行了吗？”对，但你要考虑可访问性。弹窗应该能通过Escape键关闭，遮罩层点击也要能关（除非你强制必须点确认）。这些细节，用原生JS写也就几行的事。

// 拿元素 const overlay = document.getElementById('overlay'); const openBtn = document.getElementById('openBtn'); const closeBtn = document.getElementById('closeBtn'); const confirmBtn = document.getElementById('confirmBtn'); // 打开 openBtn.addEventListener('click', () => {  overlay.style.display = 'flex'; // 用flex居中，别用block }); // 关闭函数 function closeModal() {  overlay.style.display = 'none'; } // 绑关闭事件 closeBtn.addEventListener('click', closeModal); confirmBtn.addEventListener('click', closeModal); // 点击遮罩空白处关闭（只点自己，不点内部） overlay.addEventListener('click', (e) => {  if (e.target === overlay) {  closeModal(); } }); // Escape键关闭 document.addEventListener('keydown', (e) => {  if (e.key === 'Escape' && overlay.style.display === 'flex') {  closeModal(); } });

这段代码有个细节值得注意：遮罩层用display:flex而不是display:block。因为flex配合justify-content:center和align-items:center，弹窗天然居中，不用自己算margin-top。你之前肯定写过这种蠢代码：position:fixed; left:50%; top:50%; transform:translate(-50%,-50%)——那也行，但flex更现代，而且不用考虑transform对子元素的影响。

遮罩点击关闭的判断，用的是e.target === overlay。如果你点的是弹窗内部，target是弹窗div，不会触发关闭。这个判断很关键，不然点弹窗里的文字也会关掉，用户会骂娘。

Escape键处理，我加了个条件overlay.style.display === 'flex'，防止没打开时按Esc报错。你可能会问：为什么不用hidden属性？因为hidden和display:flex冲突——浏览器内置样式会覆盖hidden。所以用style直接控制display最稳。

这套代码有多轻量？压缩后不到1KB，没有依赖，IE11都能跑（除了addEventListener的第三个参数，但那个不影响）。你要是想加个淡入动画，就在overlay上加个CSS transition，但要注意初始display不能是none——可以用opacity+visibility组合，那是另一套玩法，这里不展开。

最后说个反直觉的事：很多开发者觉得弹窗要用第三方库，比如Layer或Bootstrap Modal。但如果你只需要一个静态公告，原生代码反而更快——不用引库，不用考虑JS/CSS冲突，而且加载速度零损耗。我公司官网的公告弹窗就是这套代码，两年了没出过问题。

把代码复制到你的HTML里，点一下按钮试试。改文字、改颜色，十分钟就能变成你自己的组件。记住：弹窗不是越复杂越好，用户只想快点关掉它看到内容。