如何复用代码实现多个模态弹窗的打开功能？

当然可以！你可以通过数据属性关联按钮与对应模态框的方式，用一套通用逻辑处理所有同类弹窗，彻底消除重复代码。

步骤1：调整HTML（给按钮添加关联模态框的属性） #

给每个触发按钮新增data-modal-target属性，值对应要打开的模态框ID：

<!-- 原按钮 -->
<button class="modal-btn" data-video="xxx" data-modal-target="#videoModal">打开弹窗1</button>
<!-- 新增的按钮 -->
<button class="modal-btn-ss" data-video="yyy" data-modal-target="#videoModalSs">打开弹窗2</button>

<!-- 对应的两个模态框 -->
<div id="videoModal" class="modal">...</div>
<div id="videoModalSs" class="modal">...</div>

步骤2：编写通用JS逻辑 #

把重复的逻辑合并成一套通用代码，通过读取按钮上的data-modal-target和data-video来处理不同弹窗：

// 给所有弹窗触发按钮绑定点击事件（用逗号分隔多个选择器）
$('.modal-btn, .modal-btn-ss').on('click', event => {
    const button = event.target.closest('.modal-btn, .modal-btn-ss');
    // 从按钮获取目标模态框ID和视频链接
    const modalTarget = $(button).data('modal-target');
    const videoLink = $(button).data('video');
    
    // 调用通用的打开弹窗函数
    openModal(modalTarget, videoLink);
});

// 通用弹窗打开函数
function openModal(modalSelector, videoLink) {
    // 显示指定模态框
    $(modalSelector).modal('show');
    // 设置iframe的视频链接
    $('#video iframe').attr('src', videoLink);
}

进一步优化（可选） #

如果后续还要新增更多同类弹窗，你可以给所有触发按钮统一一个通用类名（比如video-modal-trigger），这样事件绑定更简洁：

// 统一类名后，只需绑定一次
$('.video-modal-trigger').on('click', event => {
    const button = event.target.closest('.video-modal-trigger');
    const modalTarget = $(button).data('modal-target');
    const videoLink = $(button).data('video');
    
    openModal(modalTarget, videoLink);
});

这样无论新增多少个样式不同的弹窗，只要给按钮加上video-modal-trigger类和对应的data-modal-target、data-video属性，就能复用这套逻辑，无需重复写代码。

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