原生JS实现模态框核心是动态控制遮罩层与居中弹窗的显隐，通过classList切换显示状态，监听点击/ESC/遮罩背景事件，阻止冒泡、禁用滚动、添加过渡动画及焦点管理。
用 DOM 操作实现一个弹出式模态对话框，核心是动态创建、显示和控制一组 HTML 元素（遮罩层 + 对话框容器），并绑定关闭逻辑。不需要框架，纯原生 JS 就能完成，关键在于结构清晰、事件处理到位、样式配合合理。
1. 创建基本 HTML 结构（动态或静态）
你可以预先在 HTML 中写好模态框结构（推荐），也可以完全用 JS 动态创建。静态方式更易维护、利于 SEO 和初始渲染：
<!-- 遮罩层和模态框容器 -->
<div id="modal-overlay" class="overlay hidden">
<div id="modal-dialog" class="modal">
<button id="modal-close" class="close-btn">×</button>
<h2 id="modal-title">提示</h2>
<p id="modal-content">这是一条消息</p>
<div class="modal-footer">
<button id="modal-confirm">确定</button>
<button id="modal-cancel">取消</button>
</div>
</div>
</div>对应 CSS 中定义 .hidden { display: none; }，以及遮罩层（position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6);）和模态框居中样式（如 transform: translate(-50%, -50%); top: 50%; left: 50%;）。
2. 用 JS 控制显示与隐藏
封装两个核心函数：showModal() 和 hideModal()，通过切换 .hidden 类来控制显隐：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
- 获取元素：用
document.getElementById或querySelector获取遮罩层和对话框 - 显示时移除
hidden类，并可选地聚焦到第一个可交互元素（如确认按钮），提升可访问性 - 隐藏时重新加上
hidden类，并恢复页面滚动（如果之前禁用了body{ overflow: hidden; }） - 点击遮罩层背景时关闭（但需排除点击对话框内部）
const overlay = document.getElementById('modal-overlay');
const dialog = document.getElementById('modal-dialog');
const closeBtn = document.getElementById('modal-close');
<p>function showModal(title = '提示', content = '') {
document.getElementById('modal-title').textContent = title;
document.getElementById('modal-content').textContent = content;
overlay.classList.remove('hidden');
// 可选：禁用 body 滚动
document.body.style.overflow = 'hidden';
// 自动聚焦关闭按钮或第一个按钮
closeBtn.focus();
}</p><p>function hideModal() {
overlay.classList.add('hidden');
document.body.style.overflow = '';
}</p><p>// 点击遮罩层关闭（但不包括 dialog 内部）
overlay.addEventListener('click', (e) => {
if (e.target === overlay) hideModal();
});</p><p>closeBtn.addEventListener('click', hideModal);
// ESC 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && !overlay.classList.contains('hidden')) {
hideModal();
}
});3. 支持自定义按钮行为与回调
让模态框支持“确定/取消”操作，并把用户选择透传出去，可用 Promise 封装：
- 点击“确定”时 resolve(true)，点击“取消”或关闭按钮时 resolve(false)
- 避免全局变量，用闭包或立即执行函数保存 resolve 函数
- 调用时可链式处理结果：
showConfirm('删除？').then(ok => { if (ok) doDelete(); })
function showConfirm(title = '确认', content = '确定要执行此操作吗？') {
return new Promise((resolve) => {
showModal(title, content);
document.getElementById('modal-confirm').onclick = () => {
hideModal();
resolve(true);
};
document.getElementById('modal-cancel').onclick = () => {
hideModal();
resolve(false);
};
// 点击关闭 × 或遮罩也视为取消
closeBtn.onclick = () => { hideModal(); resolve(false); };
overlay.addEventListener('click', (e) => {
if (e.target === overlay) { hideModal(); resolve(false); }
}, { once: true });
});
}4. 注意可访问性与用户体验细节
一个健壮的模态框不只是“能弹出来”，还要考虑真实使用场景：
- 按 Tab 键应在模态框内循环（用
focusableElements列表 +keydown拦截实现） - 关闭后焦点应回到触发按钮（记录
lastFocused元素） - 多次调用
showModal前应先确保上一个已关闭，防止叠加 - 移动端需处理 touchstart 防止误触穿透，或加
touch-action: none到遮罩层 - 动画过渡建议用 CSS transition（如 opacity + scale），JS 控制类名而非直接改 style
不复杂但容易忽略 —— 把结构、样式、脚本三者职责分清，DOM 操作就只是“挂事件+切类名+填内容”，真正决定体验的是细节设计。
