如何用 HTML/CSS/JavaScript 实现点击按钮弹出视频模态框

本文教你零基础实现“点击按钮显示视频、再点关闭”的交互效果，使用 bootstrap 5 快速构建响应式模态框（modal），无需手写复杂 js，兼容主流浏览器。

要让视频在点击按钮后以“弹窗”形式优雅呈现，并支持再次点击关闭，最简洁可靠的方式是借助成熟的前端框架——Bootstrap 5 提供的 Modal 组件。它已内置完整的显示/隐藏逻辑、遮罩层、过渡动画和键盘支持（如按 Esc 关闭），非常适合初学者快速上手。

下面是一个完整可运行的示例。我们将

  
  
  
  
  




  
视频演示区
  
点击下方按钮，观看嵌入式视频

  
  
    ▶ 播放介绍视频
  




  
    
      
        
产品介绍视频
        
      
      
        
        
          
        
      
      
        关闭
      
    
  

✅ 关键要点说明：

• data-bs-toggle="modal" 和 data-bs-target="#videoModal" 是触发模态框的核心属性，无需一行 JavaScript；
• 使用 包裹
• autoplay muted 允许静音自动播放（多数浏览器强制要求静音才允许自动播放）；
• modal-dialog-centered 和 modal-xl 分别实现垂直居中与大尺寸显示，提升观看体验；
• 关闭方式有三种：点击右上角 ×、点击灰色遮罩层、按键盘 Esc 键——全部由 Bootstrap 自动处理。

⚠️ 注意事项：

• 若使用本地视频文件，请将 src 改为相对路径（如 "./videos/demo.mp4"），并确保服务器环境运行（直接双击 HTML 可能因 CORS 被浏览器阻止）；
• 如需禁用自动播放，移除 autoplay muted 即可；若想默认静音但允许用户手动开启声音，保留 muted 并删除 autoplay；
• Bootstrap 5 不依赖 jQuery，因此无需额外引入 jQuery 库，轻量且现代。

掌握这一模式后，你还可以轻松扩展：添加多个视频按钮、嵌入 YouTube iframe、或配合 JavaScript 实现播放进度记忆等功能。从一个按钮开始，你已迈出了交互式网页开发的第一步。