使用 html 5 的 <dialog> 元素可创建模态框，原生支持 showModal() 和 close()方法。2. 结构包含标题、内容与按钮，通过 javaScript 控制显示隐藏。3. 可自定义css 优化样式，现代 浏览器 推荐使用。
使用 html5 的 <dialog> 元素可以轻松创建模态框。它原生支持显示和隐藏方法，无需额外的 javascript 框架。
1. 基本结构：定义 dialog 元素
在 HTML 中添加 <dialog> 标签，内部可包含标题、内容和按钮。
<dialog id="myModal"> <h3> 提示信息 </h3> <p> 这是一条模态框消息。</p> <button id="closeBtn"> 关闭 </button> </dialog> <button id="openBtn"> 打开模态框 </button>
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 的 <dialog> 使用简单，语义清晰，是现代 浏览器 推荐的模态框实现方式。
