如何基于W3Schools Modal示例实现不同按钮触发同一弹窗展示不同内容

你当前的逻辑仅实现了弹窗的显示/隐藏控制，没有在点击按钮时动态更新弹窗内的内容，所以所有按钮触发后都会展示弹窗默认的初始内容。

步骤1：调整HTML结构 #

给触发按钮新增自定义属性存储对应要展示的内容，同时给弹窗新增专门的内容容器用于动态替换内容：

<!-- 触发按钮，通过data-modal-content属性绑定对应内容 -->
<button class="myBtn" data-modal-content="按钮1的专属内容">button 1</button>
<button class="myBtn" data-modal-content="按钮2的专属内容">button 2</button>
<button class="myBtn" data-modal-content="按钮3的专属内容">button 3</button>

<!-- 弹窗结构，新增id为modalContent的内容容器 -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <div id="modalContent"></div>
  </div>
</div>

如果需要展示复杂的HTML内容，可以提前把各块内容写在页面中设置为隐藏，给按钮绑定对应内容块的ID即可。

步骤2：修改JS逻辑 #

在按钮点击事件中，先获取当前按钮绑定的内容，更新到弹窗内容容器后再显示弹窗：

var modal = document.getElementById('myModal');
// 新增：获取弹窗内容容器
var modalContent = document.getElementById('modalContent');
var btns = document.getElementsByClassName("myBtn");
var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btns.length; i++) {
      btns[i].onclick = function() {
        // 新增：读取当前按钮绑定的内容，更新到弹窗
        const currentContent = this.dataset.modalContent;
        // 纯文本内容用innerText，含HTML标签改用innerHTML
        modalContent.innerText = currentContent;
        modal.style.display = "block";
      }
}

span.onclick = function() {
      modal.style.display = "none";
}

window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
}

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