Bootstrap模态框同时展示文本与视频的实现问题

你当前遇到的问题核心是：先用textContent给模态框主体设置了文本，但紧接着用innerHTML直接替换了整个#modal_body的内容，导致之前的文本被完全覆盖，最终只显示视频。

下面给你几种可行的解决思路：

方案1：直接拼接文本与视频HTML #

用模板字符串把文本和视频标签组合起来，一次性赋值给innerHTML，就能同时保留两者：

document.getElementById("giza_Pyramid").addEventListener("click", function () {
  document.querySelector("#modal_title").textContent = "Pyramids of Giza";
  // 用模板字符串拼接文本和视频，<br>用来换行，也可以用Bootstrap的间距类比如mt-3增加留白
  document.querySelector("#modal_body").innerHTML = `${strText1}<br><br><video class="giza_Pyramid" width="450" height="350" controls src="Media/gizapyramids.mp4"></video>`;
});

方案2：通过DOM操作分步添加内容 #

这种方式更灵活，适合后续需要调整布局的场景，避免直接拼接HTML字符串：

document.getElementById("giza_Pyramid").addEventListener("click", function () {
  document.querySelector("#modal_title").textContent = "Pyramids of Giza";
  const modalBody = document.querySelector("#modal_body");
  
  // 先清空模态框主体的原有内容，防止重复点击叠加内容
  modalBody.innerHTML = "";
  
  // 添加文本内容（用p标签包裹更符合语义）
  const textElement = document.createElement("p");
  textElement.textContent = strText1;
  modalBody.appendChild(textElement);
  
  // 创建并添加视频元素
  const videoElement = document.createElement("video");
  videoElement.className = "giza_Pyramid";
  videoElement.width = 450;
  videoElement.height = 350;
  videoElement.controls = true;
  videoElement.src = "Media/gizapyramids.mp4";
  // 用Bootstrap的margin类给视频加顶部间距
  videoElement.classList.add("mt-3");
  
  modalBody.appendChild(videoElement);
});

方案3：拆分模态框主体结构（推荐） #

如果允许调整模态框的HTML结构，建议把文本和视频放在独立的容器里，逻辑更清晰，维护更方便：
首先修改模态框的HTML：

<div class="modal-body">
  <div id="modal-content-text" class="mb-3"></div>
  <div id="modal-content-video"></div>
</div>

然后修改JS代码，分别给两个容器赋值：

document.getElementById("giza_Pyramid").addEventListener("click", function () {
  document.querySelector("#modal_title").textContent = "Pyramids of Giza";
  // 设置文本内容
  document.querySelector("#modal-content-text").textContent = strText1;
  // 设置视频内容
  document.querySelector("#modal-content-video").innerHTML = '<video class="giza_Pyramid" width="450" height="350" controls src="Media/gizapyramids.mp4"></video>';
});

额外提示 #

你原代码里用if包裹事件绑定是错误的：addEventListener没有返回值（返回undefined），导致这个if条件不成立，点击事件根本没被正确绑定。一定要去掉多余的if，直接绑定事件即可。

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