如何实现单个Modal显示多个同class div的独有信息？

不需要为每个div创建单独的Modal，一个Modal就能实现需求。你当前的问题是代码里固定取了数组的第一个元素（[0]），导致所有触发事件的div都显示第一个的内容。

问题原因 #

你的代码中titleInfo[0].title和dataContent[0].dataset.content硬编码了索引0，不管哪个div触发鼠标事件，都会读取数组的第一个元素数据，所以所有Modal内容完全一致。

解决方法 #

有两种常见的修正方式：

方式1：直接从当前触发事件的div元素提取数据

如果你的每个div本身通过data-*属性（比如data-title、data-content）存储了独有信息，或者内部包含标题/段落子元素，可以直接通过当前元素获取：

boxes.forEach((box) => {
  box.addEventListener("mouseenter", function () {
    modalContainer.classList.remove("display-none");
    // 从当前box的data属性读取标题和内容
    modalTitle.innerText = this.dataset.title;
    modalParagraph.innerText = this.dataset.content;
    // 若标题是box内的子元素（比如class为box-title的元素），可改为：
    // modalTitle.innerText = this.querySelector('.box-title').textContent;
  });

  box.addEventListener("mouseleave", function () {
    modalContainer.classList.add("display-none");
  });
});

方式2：利用forEach的索引匹配数组数据

如果titleInfo和dataContent是与boxes数组一一对应的数据集，可以通过forEach的索引参数匹配对应项：

boxes.forEach((box, index) => {
  box.addEventListener("mouseenter", function () {
    modalContainer.classList.remove("display-none");
    // 使用当前box的索引读取对应数组数据
    modalTitle.innerText = titleInfo[index].title;
    modalParagraph.innerText = dataContent[index].dataset.content;
  });

  box.addEventListener("mouseleave", function () {
    modalContainer.classList.add("display-none");
  });
});

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