如何使用原生JavaScript将URL内容加载到overlay弹窗中

原生无依赖实现（推荐，不需要引入额外库） #

你可以直接用HTML+CSS+JS不到100行代码实现需求，步骤如下：

• 第一步：添加基础HTML结构

<!-- 触发链接 -->
<a href="privacy.php" class="modal-link">隐私政策</a>
<a href="terms.php" class="modal-link">服务条款</a>

<!-- 模态框结构 -->
<div class="modal-overlay" id="custom-modal">
  <div class="modal-content">
    <span class="modal-close">&times;</span>
    <div class="modal-body"></div>
  </div>
</div>

• 第二步：添加CSS样式，控制模态框宽度和展示效果

.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  z-index: 9999;
}
.modal-content {
  width: 80%;
  max-width: 960px;
  margin: 4vh auto 0;
  background: #fff;
  padding: 24px;
  border-radius: 6px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}

• 第三步：添加JS交互逻辑

// 获取所有触发链接和模态框元素
const modalLinks = document.querySelectorAll('.modal-link');
const modalOverlay = document.getElementById('custom-modal');
const modalBody = modalOverlay.querySelector('.modal-body');
const modalClose = modalOverlay.querySelector('.modal-close');

// 绑定链接点击事件
modalLinks.forEach(link => {
  link.addEventListener('click', async (e) => {
    // 阻止默认跳转行为
    e.preventDefault();
    // 获取目标页面地址
    const targetUrl = link.getAttribute('href');
    try {
      // 请求目标页面内容
      const res = await fetch(targetUrl);
      const content = await res.text();
      // 插入内容到模态框并显示
      modalBody.innerHTML = content;
      modalOverlay.style.display = 'block';
      // 禁止底层页面滚动
      document.body.style.overflow = 'hidden';
    } catch (err) {
      modalBody.innerHTML = '<p>内容加载失败，请稍后重试</p>';
      modalOverlay.style.display = 'block';
    }
  })
})

// 关闭模态框逻辑
function closeModal() {
  modalOverlay.style.display = 'none';
  modalBody.innerHTML = '';
  document.body.style.overflow = 'auto';
}
modalClose.addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (e) => {
  if (e.target === modalOverlay) closeModal();
});
// 支持ESC键关闭
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && modalOverlay.style.display === 'block') closeModal();
});

兼容原有fancybox使用习惯的方案 #

如果你的站点之前已经在用fancybox，不需要重构全套逻辑，直接配置fancybox的ajax加载模式即可，核心配置设置宽度为80%，关闭弹窗跳转的默认行为就可以适配需求，和你之前的调用逻辑一致，迁移成本极低。

注意事项 #

• 如果privacy.php、terms.php里用了相对路径的静态资源，加载到当前页面后可能出现路径错误，建议改成绝对路径，或者给资源加base标签适配
• 可以根据需求调整模态框的边距、背景透明度、关闭按钮样式，适配站点的整体设计风格

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