如何解决Handlebars中模板模态框无法关闭的问题？

核心问题分析 #

你写的modals.forEach((modal, index) => {modal.classList.toggle('open', index === openIndex);逻辑本身没问题，但它只处理了“打开指定索引模态框”的场景，没考虑“关闭所有模态框”的触发条件——当用户点击关闭按钮时，需要把openIndex设为一个无效值（比如-1），这样所有模态框的open类都会被移除。

具体修复步骤 #

1. 修正状态变量与事件绑定

先把状态初始化、打开/关闭逻辑拆分开，确保关闭按钮能重置openIndex：

// 初始化：-1表示没有任何模态框处于打开状态
let openIndex = -1;
const modals = document.querySelectorAll('.modal');
const openBtns = document.querySelectorAll('.open-modal-btn');
const closeBtns = document.querySelectorAll('.close-modal-btn');

// 绑定打开按钮事件：点击时记录当前文章索引，更新模态框状态
openBtns.forEach((btn, idx) => {
  btn.addEventListener('click', () => {
    openIndex = idx;
    updateModalStates();
  });
});

// 绑定关闭按钮事件：点击时重置索引，关闭所有模态框
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    openIndex = -1;
    updateModalStates();
  });
});

// 统一更新所有模态框的显示状态
function updateModalStates() {
  modals.forEach((modal, idx) => {
    // 当索引匹配时添加open类，否则移除
    modal.classList.toggle('open', idx === openIndex);
  });
}

2. 确保Handlebars模板结构正确

要保证每个文章卡片和对应的模态框是一一对应的，且每个模态框都有独立的关闭按钮：

{{#each articles}}
<!-- 新闻卡片 -->
<div class="news-card">
  <h3>{{title}}</h3>
  <p>{{truncate description 100}}</p>
  <button class="open-modal-btn">Open Modal</button>
</div>

<!-- 对应文章的模态框 -->
<div class="modal">
  <div class="modal-inner">
    <button class="close-modal-btn">×</button>
    <h2>{{title}}</h2>
    <p>{{content}}</p>
    <p>Source: {{source.name}}</p>
    <a href="{{url}}" target="_blank">查看原文</a>
  </div>
</div>
{{/each}}

3. 补充基础CSS（确保模态框默认隐藏）

.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}

.modal.open {
  display: flex; /* 打开时显示 */
}

.modal-inner {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
}

.close-modal-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
}

新手注意事项 #

• 一定要在Handlebars渲染完成后再绑定JS事件，比如把代码放在DOMContentLoaded事件里：

  document.addEventListener('DOMContentLoaded', () => {
    // 上面的JS代码放这里
  });
  

• 如果动态加载新的新闻数据，要重新绑定按钮事件，否则新生成的按钮不会响应点击

内容的提问来源于stack exchange，提问作者Jessica Donley