jQuery Simple Lightbox仅首个链接可打开iframe弹窗，其余跳转新页面求助

核心问题 #

1. 重复ID冲突：HTML中多个元素使用了相同的id="iframe"，jQuery选择器$('#iframe')只会匹配第一个元素，导致后续链接无法绑定弹窗事件。
2. 重复初始化脚本：每个容器内重复调用simpleLightbox()，不仅冗余，还会因ID冲突导致无效绑定。
3. 未配置iframe类型：默认情况下Simple Lightbox不会自动识别iframe链接，需显式配置弹窗内容类型。

修正步骤 #

1. 修正HTML结构（替换重复ID为Class） #

将所有带id="iframe"的div改为class，确保DOM元素标识唯一：

<div class="parallax__group info-container">
  <!-- ein Eintrag inkl. Button -->
  <img src="./img/OM791-thumb.png" alt="" />
  <div class="iframe-container text-container">
    <h2>Headline 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
    <a href="test/assets/iframe1.html" title="iframe1" rel="lightbox-iframe" class="btn">Open 3D Model</a>
  </div>
</div>

<div class="parallax__group info-container">
  <!-- ein Eintrag inkl. Button -->
  <img src="./img/OM791-thumb.png" alt="" />
  <div class="iframe-container text-container">
    <h2>Headline 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p><br>
    <a href="test/assets/iframe2.html" title="iframe2" rel="lightbox-iframe" class="btn">Open 3D Model</a>
  </div>
</div>

注：将rel="lightbox"改为rel="lightbox-iframe"，方便分组管理弹窗，也可保留原rel值，但分组更便于后续扩展。

2. 统一初始化脚本（放在页面底部） #

删除每个容器内的<script>标签，在页面末尾（确保jQuery和Simple Lightbox已加载完成）添加一次初始化代码，配置iframe参数：

<script>
$('a[rel="lightbox-iframe"]').simpleLightbox({
  // 指定弹窗内容为iframe类型
  type: 'iframe',
  // 自定义iframe尺寸（可按需调整）
  iframe: {
    width: '80%',
    height: '80%'
  },
  // 确保同一时间仅显示一个弹窗（默认已开启，此处明确配置）
  closeOverlayOnClick: true,
  closeButton: true
});
</script>

3. 额外检查点 #

• 确认jQuery和Simple Lightbox脚本加载顺序：先加载jQuery，再加载Simple Lightbox，最后加载上述初始化脚本。
• 验证所有iframe链接的href路径正确，可正常访问目标页面。

修改完成后，所有带rel="lightbox-iframe"的链接都会绑定弹窗事件，点击后将在iframe中打开内容，且同一时间仅显示一个弹窗。

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