点击不同按钮加载对应数据到同一模态框(Modal)的实现咨询

步骤1：调整触发按钮的HTML，添加标识属性 #

给两个按钮新增data-project属性，用来区分点击的是哪个项目对应的模态框数据：

<!-- 按钮1 -->
<button id="st-see-btn" type="button" data-open="modal" data-project="modal1">See Project</button>
<!-- 按钮2 -->
<button class="st-see-btn_2" type="button" data-open="modal" data-project="modal2">See Project</button>

步骤2：统一管理模态框数据，封装公用填充函数 #

把所有项目的模态框数据放到一个对象映射中，同时提前获取所有需要操作的模态框DOM元素，封装单独的填充函数避免重复代码：

// 1. 统一管理所有项目的模态框数据
const projectModals = {
  modal1: {  
    title :"Multi Post Stories",
    language1: "html",
    language2: "Bootstrap",
    language3: "Ruby on Rails", 
    projectImage: "Images/modal_img.png",
    projectTxt: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essent",
    live:"https://www.google.com",
    source:"https://www.github.com"  
  },
  modal2: {
    // 这里替换为你第二个项目的对应数据即可
    title :"第二个项目标题",
    language1: "css",
    language2: "JavaScript",
    language3: "Vue", 
    projectImage: "Images/modal_img2.png",
    projectTxt: "第二个项目的描述文本",
    live:"https://example.com",
    source:"https://github.com/example"
  }
}

// 2. 提前获取所有模态框相关DOM元素，避免重复查询DOM
const modal = document.getElementById('modal')
const modalTitle = document.querySelector('.modal_title')
const languages1 = document.getElementById('lang1')
const languages2 = document.getElementById('lang2')
const languages3 = document.getElementById('lang3')
const projectImg = document.getElementById('proj_img')
const projectContent = document.getElementById('proj_content')
const seeLiveBtn = document.getElementById('see_live')
const seeSrcBtn = document.getElementById('see_src')
const openBtns = document.querySelectorAll('[data-open="modal"]') // 选中所有触发模态框的按钮
const closeBtn = document.querySelector('[data-close="modal"]')

// 3. 封装通用填充模态框函数
function fillModal(modalData) {
  modalTitle.innerHTML = modalData.title
  languages1.innerHTML = modalData.language1
  languages2.innerHTML = modalData.language2
  languages3.innerHTML = modalData.language3
  projectImg.src = modalData.projectImage
  projectContent.innerHTML = modalData.projectTxt
  seeLiveBtn.href = modalData.live
  seeSrcBtn.href = modalData.source
}

// 4. 封装模态框显示/隐藏函数，适配移动端操作
function openModal() {
  modal.classList.add('show') // 也可以替换为你原来的显示逻辑，比如修改style.display
  document.body.style.overflow = 'hidden' // 防止模态框弹出时页面背景滚动，优化移动端体验
}
function closeModal() {
  modal.classList.remove('show')
  document.body.style.overflow = ''
}

步骤3：绑定按钮点击事件 #

给所有触发按钮绑定点击事件，根据按钮的data-project属性获取对应数据，填充后打开模态框：

// 绑定打开事件
openBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const projectId = btn.dataset.project
    const currentModalData = projectModals[projectId]
    fillModal(currentModalData)
    openModal()
  })
})

// 绑定关闭事件
closeBtn.addEventListener('click', closeModal)
// 点击模态框背景也关闭的补充逻辑（可选，移动端常用交互）
modal.addEventListener('click', (e) => {
  if(e.target === modal) closeModal()
})

样式补充（移动端适配可选） #

如果原来的模态框没有控制显示隐藏的基础样式，可以添加这段CSS：

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  z-index: 999;
  overflow-y: auto;
  padding: 16px;
  box-sizing: border-box;
}
.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal_dialog {
  background: #fff;
  border-radius: 8px;
  max-width: 90vw;
  width: 100%;
  overflow: hidden;
}

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