如何用原生JavaScript为不同Modal添加不同内容

你的问题出在这两处：

• 用document.querySelector('.modal')只拿到了页面里第一个模态框，所以不管点哪个按钮，都只会打开这同一个
• 关闭按钮也只绑定了第一个，其他模态框的关闭按钮根本没生效

下面是修正后的完整代码，直接替换就能用：

HTML（结构无需修改） #

<button class="show-modal">Show modal 1</button>
<button class="show-modal">Show modal 2</button>
<div class="modal hidden">
  <button class="close-modal">&times;</button>
  <p>Content1</p>
</div>
<div class="modal hidden">
  <button class="close-modal">&times;</button>
  <p>Content2</p>
</div>
<div class="overlay hidden"></div>

CSS（样式保持原样） #

.hidden {
  display: none;
}

JavaScript（核心修改部分） #

const modals = document.querySelectorAll('.modal');
const overlay = document.querySelector('.overlay');
const btnsCloseModal = document.querySelectorAll('.close-modal');
const btnsOpenModal = document.querySelectorAll('.show-modal');

// 打开指定索引的模态框
const openModal = function (index) {
  modals[index].classList.remove('hidden');
  overlay.classList.remove('hidden');
};

// 关闭指定模态框
const closeModal = function (modal) {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

// 给每个打开按钮绑定事件，对应索引的模态框
for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener('click', () => openModal(i));
}

// 给每个关闭按钮绑定事件，关闭自身所在的模态框
btnsCloseModal.forEach(btn => {
  btn.addEventListener('click', function () {
    const currentModal = this.closest('.modal');
    closeModal(currentModal);
  });
});

// 点击遮罩关闭所有模态框
overlay.addEventListener('click', function () {
  modals.forEach(modal => modal.classList.add('hidden'));
  overlay.classList.add('hidden');
});

关键修改说明： #

1. 获取所有元素：用querySelectorAll拿到所有模态框和关闭按钮，而非仅第一个
2. 索引关联：循环绑定按钮时，通过索引i把第n个按钮和第n个模态框对应起来
3. 关闭逻辑优化：关闭按钮通过closest('.modal')定位自身所属的模态框，后续新增模态框无需修改代码
4. 遮罩关闭逻辑：点击遮罩时统一关闭所有模态框，避免残留显示

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