使用HTML5的元素可创建模态框，原生支持showModal()和close()方法。2. 结构包含标题、内容与按钮，通过JavaScript控制显示隐藏。3. 可自定义CSS优化样式，现代浏览器推荐使用。
使用 HTML5 的 元素可以轻松创建模态框。它原生支持显示和隐藏方法，无需额外的 JavaScript 框架。
1. 基本结构：定义 dialog 元素
在 HTML 中添加 标签，内部可包含标题、内容和按钮。
2. 显示模态框：showModal() 方法
调用 showModal() 方法让 dialog 以模态方式显示（背景不可点击）。
立即学习“前端免费学习笔记（深入）”；
const modal = document.getElementById('myModal');
const openBtn = document.getElementById('openBtn');
openBtn.addEventListener('click', () => {
modal.showModal(); // 显示模态框
});
3. 隐藏模态框：close() 方法
调用 close() 方法关闭 dialog。可监听关闭按钮或其他事件触发。
const closeBtn = document.getElementById('closeBtn');
closeBtn.addEventListener('click', () => {
modal.close(); // 关闭模态框
});
也可以通过点击遮罩层外区域关闭（默认行为），但注意点击遮罩层不会关闭，需手动添加逻辑处理取消操作。
4. 可选样式优化
默认 dialog 有浅灰色背景和居中效果，可通过 CSS 调整外观。
dialog {
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
width: 300px;
padding: 20px;
}
基本上就这些。HTML5 的 使用简单，语义清晰，是现代浏览器推荐的模态框实现方式。
