Vanilla JavaScript实现动态内容模态框

<div class="buttons">
  <button class="show-modal" data-id="one">
    显示模态框 1
  </button>
  <button class="show-modal" data-id="two">
    显示模态框 2
  </button>
</div>

<div class="modal hidden">
  <div class="modal-header">
    <button class="close-modal">&times;</button>
  </div>
  <div class="modal-content">
    <p>默认内容</p> <!-- 这个段落将动态更新 -->
  </div>
</div>

<div class="overlay hidden"></div>

.hidden {
  display: none;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px); /* 增加背景模糊效果 */
  z-index: 998; /* 确保遮罩层在模态框之下，背景之上 */
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 居中显示模态框 */
  width: 70%; /* 模态框宽度 */
  max-width: 600px; /* 最大宽度限制 */
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3); /* 增加阴影效果 */
  z-index: 999; /* 确保模态框在遮罩层之上 */
  transition: all 0.3s ease-in-out; /* 平滑过渡效果 */
}

.modal-header {
  display: flex;
  justify-content: flex-end; /* 将关闭按钮推到右边 */
  margin-bottom: 20px;
}

.close-modal {
  background: none;
  border: none;
  font-size: 2.5rem;
  cursor: pointer;
  color: #333;
  padding: 0 10px;
  line-height: 1; /* 避免按钮高度过大 */
}

.modal-content p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #555;
  text-align: center;
}

// 缓存DOM元素
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay'); // 遮罩层
const modalContentPara = modal.querySelector('.modal-content p'); // 模态框内容段落
const closeButton = modal.querySelector('.close-modal'); // 关闭按钮
const buttonsContainer = document.querySelector('.buttons'); // 按钮容器

// 定义模态框内容，键与按钮的 data-id 对应
const modalContents = {
  one: "这是第一个模态框的动态内容。它展示了如何灵活地为用户提供信息。",
  two: "这是第二个模态框的动态内容，它展示了如何根据不同的按钮显示不同的信息。这种方法提高了代码的可维护性。",
  // 您可以根据需要添加更多内容条目
};

// 为按钮容器添加事件监听器，使用事件委托
buttonsContainer.addEventListener('click', handleButtonClick);

// 为关闭按钮和遮罩层添加事件监听器，点击它们都可以关闭模态框
closeButton.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

/**
 * 处理按钮点击事件。
 * @param {Event} e - 点击事件对象。
 */
function handleButtonClick(e) {
  // 检查点击事件是否来源于具有 .show-modal 类的按钮
  if (e.target.matches('.show-modal')) {
    // 从按钮的 dataset 中解构出 id
    const { id } = e.target.dataset;

    // 根据 id 从 modalContents 对象中获取对应内容
    const content = modalContents[id];

    // 将内容添加到模态框的段落元素中
    modalContentPara.textContent = content;

    // 显示模态框和遮罩层
    openModal();
  }
}

/**
 * 显示模态框和遮罩层。
 */
function openModal() {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
}

/**
 * 隐藏模态框和遮罩层。
 */
function closeModal() {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
}