如何从不同JS文件、不同页面调用打开同一modal且无需重复复制代码

1. 单页面下通过两个不同JS文件打开同一modal #

完全可以实现，仅需满足以下条件：

• 首先修正你现有Homepage.js的函数语法错误，同时将打开方法挂载到全局作用域，确保所有JS文件都能访问：

// Homepage.js 修正后写法
window.openHomepageModal = function () {
    $('#Homepage-modal').modal('show');
}

• 保证两个JS文件的引入/执行时机晚于modal DOM元素、jQuery、Bootstrap依赖的加载完成时间
• 其他JS文件中可直接调用openHomepageModal()，或直接执行$('#Homepage-modal').modal('show')，都能正常触发该模态框

2. 跨页面无需复制代码调用同一modal #

需根据你的项目架构选择对应方案：

单页应用（SPA，无刷新页面跳转） #

直接将该模态框抽为全局公共组件，所有路由页面均可直接调用打开方法，无需重复编写modal代码。

传统多页应用（MPA，跳转后页面刷新） #

跳转到其他页面后homepage.html的DOM已完全销毁，无法直接调用另一页面的DOM元素，但可通过动态加载公共片段的方案避免手动复制代码：

1. 将modal的HTML代码单独抽离为公共片段文件common-homepage-modal.html
2. 在需要使用该模态框的页面中，通过JS动态加载片段插入当前页面，示例代码如下：

// 任意页面的JS文件都可调用该方法加载并打开模态框
async function loadAndOpenModal() {
    // 避免重复插入DOM
    if(document.getElementById('Homepage-modal')) {
        $('#Homepage-modal').modal('show');
        return
    }
    // 加载公共modal片段
    const res = await fetch('/静态资源公共路径/common-homepage-modal.html')
    const modalContent = await res.text()
    document.body.insertAdjacentHTML('beforeend', modalContent)
    // 加载完成后打开模态框
    $('#Homepage-modal').modal('show')
}

也可通过服务端模板的include能力、服务端包含（SSI）等方案实现公共片段自动引入，同样不需要手动复制代码。

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