如何使用JavaScript或Jquery实现点击卡片弹出加载外部HTML内容的模态框

完全可以通过JS/jQuery实现该需求，核心逻辑是点击卡片时阻止默认跳转，通过AJAX请求resume.html的内容，提取<main>标签内容插入到预先写好的模态框容器中，最后显示模态框即可。

第一步：修改原有卡片代码 #

把原有的空href的a标签修改，避免点击默认跳转：

<a href="javascript:void(0)" id="resumeCard">
    <div class="card">
        <div class="card-body">
            <div class="card-top">
                <h2>Resume</h2>
            </div>
            <div class="card-bottom">
                <p>I would like to share my resume with whoever it may concern that outlining all the achievements and skills I have achieved.</p>
                <button>See More</button>
            </div>
        </div>
    </div>
</a>

第二步：添加模态框HTML结构 #

在当前页面的body末尾加入模态框的容器：

<!-- 模态框容器 -->
<div id="resumeModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 9999; overflow-y: auto;">
    <!-- 模态框内容区 -->
    <div style="width: 90%; max-width: 1000px; margin: 50px auto; background: #fff; padding: 20px; border-radius: 8px; position: relative;">
        <!-- 关闭按钮 -->
        <span id="closeModal" style="position: absolute; top: 10px; right: 20px; font-size: 28px; cursor: pointer;">&times;</span>
        <!-- 简历内容加载区 -->
        <div id="resumeContent"></div>
    </div>
</div>

注：你也可以把上述行内样式拆分到你的CSS文件中，这里写行内是为了快速验证效果

第三步：JS逻辑实现 #

方案1：jQuery实现（项目已引入jQuery时推荐，代码更简洁） #

$(function() {
    // 点击简历卡片触发加载
    $('#resumeCard').on('click', function() {
        // 直接加载resume.html里的main标签内容插入到内容区
        $('#resumeContent').load('resume.html main', function(response, status) {
            if (status === 'success') {
                // 加载成功显示模态框
                $('#resumeModal').fadeIn();
            } else {
                alert('简历加载失败，请稍后重试');
            }
        });
    });

    // 点击关闭按钮隐藏模态框
    $('#closeModal').on('click', function() {
        $('#resumeModal').fadeOut();
    });

    // 点击模态框遮罩层也可关闭
    $('#resumeModal').on('click', function(e) {
        if (e.target === this) {
            $(this).fadeOut();
        }
    });
});

方案2：原生JavaScript实现（无需引入额外依赖） #

document.addEventListener('DOMContentLoaded', function() {
    const resumeCard = document.getElementById('resumeCard');
    const resumeModal = document.getElementById('resumeModal');
    const closeModal = document.getElementById('closeModal');
    const resumeContent = document.getElementById('resumeContent');

    // 点击卡片加载简历
    resumeCard.addEventListener('click', function() {
        fetch('resume.html')
            .then(response => response.text())
            .then(html => {
                // 解析返回的HTML，提取main标签内容
                const parser = new DOMParser();
                const doc = parser.parseFromString(html, 'text/html');
                const mainContent = doc.querySelector('main');
                if (mainContent) {
                    resumeContent.innerHTML = mainContent.innerHTML;
                    resumeModal.style.display = 'block';
                } else {
                    alert('未找到简历内容');
                }
            })
            .catch(err => {
                console.error('加载失败:', err);
                alert('简历加载失败，请稍后重试');
            });
    });

    // 关闭模态框
    closeModal.addEventListener('click', function() {
        resumeModal.style.display = 'none';
    });

    // 点击遮罩关闭
    resumeModal.addEventListener('click', function(e) {
        if (e.target === resumeModal) {
            resumeModal.style.display = 'none';
        }
    });
});

注意事项 #

• 要保证resume.html和当前页面在同一个域名下，否则会触发跨域限制；本地调试时建议用本地服务器（比如VSCode的Live Server插件）打开，不要直接双击打开HTML文件
• 如果resume.html里的样式没有生效，可以把简历对应的CSS文件也引入到当前页面中

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