JavaScript自定义模态框核心是控制遮罩层与居中弹窗的显隐，通过classList切换show类、监听点击/ESC/背景点击事件，并阻止冒泡、禁用滚动、添加过渡动画和焦点管理实现轻量可用效果。
用 JavaScript 制作自定义模态框，核心是控制一个遮罩层（overlay）和一个居中弹窗（modal）的显示与隐藏，同时处理点击、ESC 键、背景点击关闭等交互。不需要依赖 jQuery 或框架，原生 JS 就能搞定。
结构：HTML 基础骨架
先写一个隐藏的模态框结构，包含遮罩层、弹窗容器、标题、内容区和关闭按钮：
<div id="myModal" class="modal"><div class="modal-overlay"></div>
<div class="modal-box">
<div class="modal-header">
<h3>提示</h3>
<button id="closeBtn">×</button>
</div>
<div class="modal-body">
<p>这是自定义模态框的内容</p>
</div>
<div class="modal-footer">
<button id="confirmBtn">确定</button>
</div>
</div>
</div>
样式：CSS 实现居中与遮罩
关键点：遮罩全屏透明、弹窗绝对定位居中、禁止背景滚动：
.modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 400px; background: #fff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; }
.modal-body { padding: 20px; }
.modal-footer { padding: 12px 20px; text-align: right; border-top: 1px solid #eee; }
/* 显示时才生效 */
.modal.show { display: block; }
/* 防止页面滚动 */
.modal.show body { overflow: hidden; }
交互：JavaScript 控制逻辑
用 JS 绑定打开、关闭、ESC 和点击遮罩关闭事件：
立即学习“Java免费学习笔记（深入）”；
const modal = document.getElementById('myModal');const openBtn = document.getElementById('openBtn'); // 假设你有个触发按钮
const closeBtn = document.getElementById('closeBtn');
const overlay = document.querySelector('.modal-overlay');
// 打开模态框
function openModal() {
modal.classList.add('show');
}
// 关闭模态框
function closeModal() {
modal.classList.remove('show');
}
// 绑定事件
openBtn?.addEventListener('click', openModal);
closeBtn?.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);
// 按 ESC 键关闭
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('show')) {
closeModal();
}
});
// 点击弹窗内部不关闭（阻止冒泡）
document.querySelector('.modal-box').addEventListener('click', e => e.stopPropagation());
增强体验的小技巧
- 添加 CSS 过渡动画，比如
opacity和transform的 fade-in 效果 - 焦点管理：打开时自动聚焦到第一个可交互元素，关闭后恢复到触发按钮
- 支持传参：封装成函数
showModal(title, content, onConfirm)提高复用性 - 移动端适配：弹窗宽度设为
90vw，最大宽500px，避免过宽
基本上就这些。不复杂但容易忽略细节——比如阻止事件冒泡、处理 ESC、禁用背景滚动。做好这几点，一个轻量、可用、符合无障碍基础要求的自定义模态框就完成了。
