如何使用JavaScript实现多视频弹窗：点击对应链接弹出指定视频

一、实现不同链接弹出对应视频的修改方案 #

你提到的给show()函数添加参数的思路完全可行，通过传递视频路径参数动态切换弹窗视频源即可解决问题。以下是具体修改后的代码：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Video Popups</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <section>
    <div class="home">      
      <a href="#" onclick="show('video1.mp4')">Watch Video 1</a>      
      <a href="#" onclick="show('video2.mp4')">Watch Video 2</a>
    </div>
    <div class="popup">
      <video controls></video>
      <img src="close.png" onclick="show()" class="close" alt="Close popup">
    </div>
  </section>
  <script>
    function show(videoSrc) {
      var popup = document.querySelector(".popup");
      var video = document.querySelector("video");
      
      // 点击关闭按钮时，仅切换弹窗状态并重置视频
      if (!videoSrc) {
        popup.classList.toggle("active");
        video.pause();
        video.currentTime = 0;
        return;
      }
      
      // 点击视频链接时，先重置当前视频，再设置新视频源并显示弹窗
      if (popup.classList.contains("active")) {
        video.pause();
        video.currentTime = 0;
      }
      video.src = videoSrc;
      popup.classList.add("active");
      // 可选：添加自动播放（需注意浏览器自动播放限制）
      // video.play();
    }
  </script>
</body>
</html>

关键修改说明 #

• 给两个视频链接的onclick事件传递对应视频路径参数，比如show('video1.mp4')
• 改造show()函数，新增videoSrc参数：
  • 无参数传入（点击关闭按钮）时，仅切换弹窗显示状态并重置视频
  • 有参数传入（点击视频链接）时，先重置当前视频，再设置新视频源并显示弹窗
• 移除原video标签的固定src属性，改为通过JS动态赋值

CSS部分无需修改，保持原有样式即可。

二、DOM操作与常用JS/CSS函数的学习资源 #

你计划学习的Jonas Schmedtmann的《The Complete Javascript Course 2023: From Zero to Expert!》非常合适，课程会系统覆盖DOM元素编辑、事件处理（如onclick）、classList这类常用API的实际应用，能帮你快速掌握相关技能。

除此之外，还可以参考这些免费内容：

• MDN Web Docs：权威的前端技术文档，包含DOM操作、CSSOM、事件模型的详细教程和示例，比如classList.toggle/add/remove等方法都有清晰说明
• 实操小项目：动手做一些简单交互组件（如弹窗、导航菜单、轮播图），在实践中巩固classList.toggle、onclick事件绑定这类知识点，比纯看文档更有效

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