使用jQuery插件iziModal点击section无法唤起iframe弹窗，如何解决？

你的代码目前有几个关键问题导致无法正常批量处理所有作品项的点击，我帮你整理了修正后的完整方案：

问题分析 #

1. 只单独给.item1绑定了点击事件，其他作品项（item2~item5）没有触发逻辑
2. 模态框初始化时固定了iframeURL，无法根据点击的不同item加载对应的详情页面
3. 存在拼写错误：ifremeHeight应该是iframeHeight，这个会导致iframe高度设置失效

修正后的完整代码 #

HTML部分（保留结构，简化不必要的data属性） #

<div class="list">
  <div class="items">
    <section class="item" data-iframe-url="data-1.html">
      <img src="img/1.png" alt="1" />
      <h2>title1</h2>
      <p>description1 description1</p>
    </section>
    <section class="item" data-iframe-url="data-2.html">
      <img src="img/2.png" alt="2" />
      <h2>title2</h2>
      <p>description2 description2</p>
    </section>
    <section class="item" data-iframe-url="data-3.html">
      <img src="img/3.png" alt="3" />
      <h2>title3</h2>
      <p>description3 description3</p>
    </section>
    <section class="item" data-iframe-url="data-4.html">
      <img src="img/4.png" alt="4" />
      <h2>title4</h2>
      <p>description4 description4</p>
    </section>
    <section class="item" data-iframe-url="data-5.html">
      <img src="img/5.png" alt="5" />
      <h2>title5</h2>
      <p>description5 description5</p>
    </section>
  </div>
</div>
<!-- 提前添加模态框的容器 -->
<div id="iframe"></div>

jQuery部分 #

// 初始化iziModal模态框
$("#iframe").iziModal({
  iframe: true,
  width: '98%',
  iframeHeight: '98%', // 修正拼写错误
  zindex: 10, // 数字类型无需加引号
  group: 'works',
  overlayColor: 'rgba(0,0,0,0.1)',
  // 去掉固定的iframeURL，改为动态设置
});

// 给所有.item绑定点击事件
$(document).on('click', '.item', function (event) {
  event.preventDefault();
  // 获取当前点击项对应的iframe地址
  const targetUrl = $(this).data('iframe-url');
  // 动态更新模态框的iframe地址
  $('#iframe').iziModal('set', 'iframeURL', targetUrl);
  // 打开模态框
  $('#iframe').iziModal('open');
});

关键修改说明 #

• 统一事件绑定：用.item选择器一次性给所有作品项绑定点击事件，不用逐个写item1、item2，代码更简洁易维护
• 动态设置iframe地址：点击时从当前元素的data-iframe-url属性获取对应详情页地址，再通过iziModal('set', 'iframeURL', targetUrl)方法动态更新模态框内容
• 修正拼写错误：把ifremeHeight改为正确的iframeHeight，确保iframe高度设置生效
• 简化data属性：去掉了不必要的data-izimodal-open，直接通过JS控制模态框的打开逻辑，更灵活

这样修改后，点击任意一个作品section，都会弹出模态框并加载对应的详情iframe页面啦。

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