以前做模态框，要么套一个 div 自己控制 display，要么引第三方库，还要处理焦点、ESC 关闭、遮罩层、滚动锁定。现在浏览器里有个现成的 <dialog> 元素，原生支持模态框、表单集成、::backdrop 样式，甚至能避免复杂的层级问题。今天用实际案例教你怎么写出一个正经的登录弹窗，纯 HTML + 一点点 CSS，不用任何框架。
dialog 到底是什么
它是一个原生的弹窗元素，默认就是隐藏的，没有显示时不影响布局。它有两种显示方式：
show()—— 非模态，相当于一个普通元素，但浮在上面，可以和其他元素交互。showModal()—— 模态显示，顶部层级，背景可加遮罩，并且默认锁住弹窗外部的焦点（按 Tab 不会跳出去）。
一般我们重点用 `showModal()`。
最基础的结构
<dialog id="loginDialog">
<h2>登录</h2>
<p>请输入用户名和密码</p>
<button type="button" id="closeBtn">关闭</button>
</dialog>
<button type="button" id="showBtn">打开登录框</button>
上面那个 dialog 默认是隐藏的，点击“打开登录框”按钮，JS 里调用 document.getElementById('loginDialog').showModal()，它就会弹出来。关闭按钮则调用 close()。但这里有一个更酷的玩法：直接用 form 的 method="dialog" 来关闭对话框，不需要 JS。
表单集成：method=dialog 才是精髓
你可以把登录表单放在 dialog 内部，然后提交按钮加上 value 属性，点击它自动关闭弹窗并传递返回值。看这个例子：
<dialog id="loginDialog">
<form method="dialog">
<p>用户名：<input type="text" name="username" required></p>
<p>密码：<input type="password" name="password" required></p>
<button value="cancel" formnovalidate>取消</button>
<button value="submit">登录</button>
</form>
</dialog>
点击“登录”按钮后，对话框会自动关闭，并且触发 close 事件，dialog.returnValue 会变成按钮的 value（这里 “submit”）。点击“取消”也一样，只不过 value 是 “cancel”。required 字段为空时，不会提交，也就不会关闭弹窗，天然的表单验证。一个登录弹窗竟然不需要任何 JS 控制关闭，只用 HTML 就完成了大部分逻辑。
实际效果代码
我们组合一下，写一个完整可运行的示例：
<!DOCTYPE html>
<html lang="zh">
<body>
<button id="openBtn">打开登录弹窗</button>
<dialog id="loginDialog">
<form method="dialog">
<p><label>用户名：<input type="text" name="username" required></label></p>
<p><label>密码：<input type="password" name="password" required></label></p>
<button value="cancel" formnovalidate>取消</button>
<button value="login">登录</button>
</form>
</dialog>
<script>
const dialog = document.getElementById('loginDialog');
document.getElementById('openBtn').addEventListener('click', () => {
dialog.showModal();
});
dialog.addEventListener('close', () => {
const result = dialog.returnValue;
if (result === 'login') {
// 这里可以做登录逻辑
alert('执行登录操作');
} else {
alert('你取消了');
}
});
</script>
</body>
</html>
你说方便不方便？不再需要写什么 `display:block`，不用监听点击外部，浏览器自己处理了焦点和堆叠顺序。
给弹窗加个遮罩：轻松搞定
对话框打开时，可以使用伪元素 ::backdrop 来设置遮罩层的样式。这个伪元素只有模态框（showModal）才会显示。你可以在 CSS 里这样写：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(3px);
}
backdrop-filter 还能让背景模糊，效果瞬间高大上。同样，你也可以给 dialog 本身设置圆角、阴影等，所有 CSS 都适用。
动画怎么做？
以前我们会写 transition 来模拟弹窗出现效果。dialog 现在也支持了，但要注意：dialog 的 display 默认是 none，直接对 display 做动画无效。解决方法是使用 transition-behavior: allow-discrete 和 @starting-style（这俩属于较新的 CSS 特性，Chrome 已支持）。更简单的做法是使用 Web Animations API 来为 dialog 添加滑入或淡入效果。
例如在调用 showModal 之前，先设置 dialog 的初始透明度，然后通过 requestAnimationFrame 加上过渡。不过今天重点是原生能力，就不展开细写动画了。给一个简单的淡入：
dialog[open] {
opacity: 1;
transition: opacity 0.3s ease;
}
dialog {
opacity: 0;
}
你会发现 Firefox 下也能跑，因为 display: none 到 showModal 会重新触发渲染，这个技巧多数情况下有效。但严谨来说，需要配合 starting-style 才能保证顺滑。如果你懒得搞动画，用默认的也够用了。
焦点管理，原生就办到了
使用 showModal() 打开后，浏览器会将焦点移入 dialog 内部的第一个可聚焦元素，并且 Tab 键不会跳出弹窗外，直到对话框关闭。这对于键盘可访问性来说简直救命。你不需要自己写 focus trap 了。
除了弹窗，dialog 还能做抽屉、轻提示
因为可以任意设置宽高和定位，你可以把 dialog 固定到页面底部做 toast，或右侧做抽屉。只需要 CSS 调整位置和大小，配合 show() 非模态模式，甚至能做一个非拦截式的浮层。比如顶部的通知：
dialog.toast {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
margin: 0;
border: none;
border-radius: 8px;
padding: 12px 20px;
background: #333;
color: #fff;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
这样它就是一个居中悬浮的小条，而且由于非模态，用户仍然可以操作页面其他部分。
一个更完整的登录弹窗（含取消和验证）
现在我们把学到的东西整合成一个更完整的例子，包括遮罩、动画提示、取消和登录事件的区分：
<!DOCTYPE html>
<html lang="zh">
<body>
<style>
dialog {
border: none;
border-radius: 12px;
padding: 24px;
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
width: 320px;
}
dialog::backdrop {
background: rgba(0,0,0,0.4);
}
.btn-group {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 16px;
}
.btn-group button {
padding: 8px 16px;
border-radius: 6px;
border: none;
cursor: pointer;
}
#openBtn {
font-size: 16px;
}
</style>
<button id="openBtn">打开登录弹窗</button>
<dialog id="loginDialog">
<form method="dialog" id="loginForm">
<h3>会员登录</h3>
<p><label>账号：<input type="text" name="username" required autofocus></label></p>
<p><label>密码：<input type="password" name="password" required></label></p>
<div class="btn-group">
<button value="cancel" formnovalidate>取消</button>
<button value="login" style="background:#4a90d9;color:#fff;">登录</button>
</div>
</form>
</dialog>
<script>
const dialog = document.getElementById('loginDialog');
const openBtn = document.getElementById('openBtn');
openBtn.addEventListener('click', () => {
dialog.showModal();
});
dialog.addEventListener('close', () => {
const ret = dialog.returnValue;
if (ret === 'login') {
// 实际项目中你可能要发送请求进行登录
alert(`用户名：${loginForm.username.value}，密码已加密`);
} else if (ret === 'cancel') {
console.log('用户取消登录');
}
});
// 点击遮罩层（即 dialog 自身）也可以关闭吗？这是另一个话题。
// 但默认情况下，点击遮罩不会关闭，需要自己写。其实这算优点，防止误点丢失表单内容。
</script>
</body>
</html>
这个代码你直接复制到本地跑，就能感受到原生的流畅。需要留意一点：formnovalidate 用于取消按钮，这样当你点了取消，就算输入框为空，也不会触发表单验证，而是直接关闭。autofocus 让打开后直接聚焦到用户名输入框。
可能遇到的坑
- 在 Safari 和 Firefox 中，dialog 的支持度较早之前就有，但
form method="dialog"在某些旧版本里不好使。如果你要兼容老 iOS，建议加一个事件兜底。不过现代浏览器都支持得不错。 - 使用
close()后会触发close事件，但如果用cancel事件（比如 ESC 键），会先触发cancel事件，再触发 close。可以通过监听 cancel 来拦截 ESC 关闭。偶尔你想阻止 ESC 关闭，可以preventDefault()。 - 如果你在弹窗里放视频或 iframe，它们可能无法正确参与焦点管理，这个暂时无解。但一般弹窗里不会放这些。
更炫酷的用法：dialog 配合 showPopover？
其实 Popover API 和 dialog 是两个不同方向。Popover 更轻量，适合提示气泡；dialog 适合正式表单。两者共存没问题。当你需要比如“点击按钮后，弹出一个带输入框的气泡”时，可以用 popover 加 input，但如果你需要更复杂的表单且要锁滚动，dialog 是正途。
总结
原生 <dialog> 真的被低估了。很多人还在用自制的弹窗组件，却不知道浏览器已经提供了这么完整的解决方案。它自带遮罩、焦点管理、ESC 关闭和表单集成，让你写弹窗时不再需要额外的状态管理和样式重置。
今天用登录框做例子，以后你再遇到“弹窗确认”“信息填写”，就直接套用这个模式。省下那些乱七八糟的 JS，页面性能还更好。
快去试试吧，把项目里那些用 div 手搓的弹窗换成 dialog，你会感谢自己。
