答案：使用JavaScript封装Modal类实现模态框，包含遮罩层、内容容器和关闭功能，支持动态更新标题与内容，提供确认/取消回调，通过open()/close()控制显隐，易于复用和扩展。
模态框（Modal）是前端开发中常用的UI组件，用于在当前页面弹出一个对话框，提示用户进行操作，比如确认删除、填写表单或展示详细信息。使用JavaScript可以轻松实现一个功能完整、可复用的Modal组件。
基本结构与HTML模板
一个模态框通常包含三个部分：遮罩层（overlay）、内容容器（modal-content）和关闭按钮。先构建基础HTML结构：
<div id="modal" class="modal">
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">标题</h3>
<span class="modal-close">×</span>
</div>
<div class="modal-body">
<p>这里是模态框的内容。</p>
</div>
<div class="modal-footer">
<button class="btn-cancel">取消</button>
<button class="btn-confirm">确定</button>
</div>
</div>
</div>
样式设计（CSS关键点）
模态框默认隐藏，通过JavaScript控制显示与隐藏。关键CSS设置包括居中定位、遮罩层透明度和层级管理：
.modal {
display: none;
position: fixed;
z-index: 1000;
}
.modal-overlay {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.modal-close {
cursor: pointer;
font-size: 24px;
}
JavaScript实现核心逻辑
封装一个Modal类，支持打开、关闭、自定义标题和内容，并提供回调函数：
立即学习“Java免费学习笔记（深入）”；
功能点包括：
- 动态创建或复用DOM元素
- 点击遮罩或关闭按钮关闭模态框
- 支持确认/取消回调
- 防止多次实例化冲突
class Modal {
constructor(options) {
this.options = {
title: '提示',
content: '',
onConfirm: null,
onCancel: null,
...options
};
this.element = document.getElementById('modal');
this.isOpen = false;
this.init();
}
init() {
if (!this.element) {
this.createElement();
}
this.bindEvents();
}
createElement() {
const modal = document.createElement('div');
modal.id = 'modal';
modal.className = 'modal';
modal.innerHTML = `
<div class="modal-overlay"></div>
<div class="modal-container">
<div class="modal-header">
<h3 class="modal-title">${this.options.title}</h3>
<span class="modal-close">×</span>
</div>
<div class="modal-body">
<p>${this.options.content}</p>
</div>
<div class="modal-footer">
<button class="btn-cancel">取消</button>
<button class="btn-confirm">确定</button>
</div>
</div>
`;
document.body.appendChild(modal);
this.element = modal;
}
bindEvents() {
const closeBtn = this.element.querySelector('.modal-close');
const cancelBtn = this.element.querySelector('.btn-cancel');
const confirmBtn = this.element.querySelector('.btn-confirm');
const overlay = this.element.querySelector('.modal-overlay');
closeBtn.onclick = () => this.close();
cancelBtn.onclick = () => {
this.close();
if (typeof this.options.onCancel === 'function') {
this.options.onCancel();
}
};
confirmBtn.onclick = () => {
this.close();
if (typeof this.options.onConfirm === 'function') {
this.options.onConfirm();
}
};
overlay.onclick = () => this.close();
}
open() {
this.isOpen = true;
this.element.style.display = 'block';
document.body.style.overflow = 'hidden'; // 防止背景滚动
}
close() {
if (!this.isOpen) return;
this.isOpen = false;
this.element.style.display = 'none';
document.body.style.overflow = ''; // 恢复滚动
}
setTitle(title) {
this.element.querySelector('.modal-title').textContent = title;
}
setContent(content) {
this.element.querySelector('.modal-body').innerHTML = content;
}
}
使用示例
调用方式简单直观，适合集成到各种项目中：
const myModal = new Modal({
title: '删除确认',
content: '确定要删除这条数据吗？',
onConfirm: () => {
console.log('用户点击了确定');
},
onCancel: () => {
console.log('用户取消操作');
}
});
// 打开模态框
myModal.open();
// 动态更新内容
myModal.setTitle('警告');
myModal.setContent('请确认您的操作！');
基本上就这些。这个Modal组件轻量、可扩展，适用于大多数需要弹窗交互的场景。你可以进一步添加动画效果、支持Promise异步调用或与框架（如React/Vue）集成。关键是结构清晰、事件解耦、易于维护。
