本文详细介绍如何使用原生JavaScript从零构建一个功能完整、可复用的模态框（Modal）组件，涵盖HTML结构设计、CSS样式布局以及核心JavaScript逻辑实现。

在现代网页开发中，模态框（Modal）是一种极为常见的UI交互元素。它通常用于展示重要信息、提示用户操作或收集输入内容，而无需跳转页面。虽然市面上有许多成熟的UI框架提供了模态框组件，但理解其底层实现原理，对于提升前端开发能力至关重要。本文将带你一步步使用原生JavaScript实现一个简洁、可复用的模态框组件。

首先，我们从HTML结构开始。一个基本的模态框通常包含三个部分：背景遮罩层（overlay）、模态框容器（modal）和内容区域（包括标题、正文和按钮）。为了保证语义化和可访问性，我们使用<div>元素并合理添加role属性与aria-*标签。代码如下：

html

接下来是CSS样式部分。我们需要让模态框在页面居中显示，并确保遮罩层覆盖整个视口。通过position: fixed定位，配合transform实现精准居中。同时，为增强用户体验，加入淡入淡出的过渡动画。关键样式代码如下：

css
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
}

.modal-overlay.active {
opacity: 1;
visibility: visible;
}

.modal-container {
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
width: 90%;
max-width: 500px;
transform: scale(0.9);
transition: transform 0.3s ease;
}

.modal-overlay.active .modal-container {
transform: scale(1);
}

现在进入核心部分——JavaScript逻辑。我们的目标是封装一个Modal类，使其具备显示、隐藏、自定义内容和回调函数的能力。构造函数接收配置对象，包括标题、内容、确认和取消回调等。

javascript
class Modal {
constructor(options = {}) {
this.title = options.title || '提示';
this.content = options.content || '';
this.onConfirm = options.onConfirm || null;
this.onCancel = options.onCancel || null;

this.overlay = document.getElementById('modal-overlay');
this.container = this.overlay.querySelector('.modal-container');
this.titleEl = document.getElementById('modal-title');
this.bodyEl = this.overlay.querySelector('.modal-body');
this.closeBtn = this.overlay.querySelector('.modal-close');
this.cancelBtn = this.overlay.querySelector('.btn-cancel');
this.confirmBtn = this.overlay.querySelector('.btn-confirm');

this.initEvents();

}

initEvents() {
// 点击遮罩或关闭按钮关闭模态框
this.overlay.addEventListener('click', (e) => {
if (e.target === this.overlay || e.target.classList.contains('modal-close')) {
this.hide();
}
});

// 绑定按钮事件
this.closeBtn.addEventListener('click', () => this.hide());
this.cancelBtn.addEventListener('click', () => {
  this.hide();
  if (this.onCancel) this.onCancel();
});
this.confirmBtn.addEventListener('click', () => {
  this.hide();
  if (this.onConfirm) this.onConfirm();
});

// 支持ESC键关闭
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && this.isVisible()) {
    this.hide();
  }
});

}

show() {
this.titleEl.textContent = this.title;
this.bodyEl.innerHTML = <p>${this.content}</p>;
this.overlay.classList.add('active');
document.body.style.overflow = 'hidden'; // 防止背景滚动
}

hide() {
this.overlay.classList.remove('active');
document.body.style.overflow = ''; // 恢复滚动
}

isVisible() {
return this.overlay.classList.contains('active');
}
}

使用时只需实例化并调用show()方法：

javascript
const myModal = new Modal({
title: '确认删除？',
content: '此操作不可撤销，是否继续？',
onConfirm: () => alert('已删除'),
onCancel: () => console.log('取消操作')
});

myModal.show();

这个模态框组件不仅结构清晰，还具备良好的扩展性。未来可以进一步支持异步加载、表单嵌入、拖拽移动等功能。通过亲手实现这样一个组件，我们不仅能加深对DOM操作和事件机制的理解，也能为构建更复杂的UI系统打下坚实基础。