如何使用iziModal在多个画廊中使用iFrame？

Question

iziModal official
与官方示例一样，如果我按下按钮，则制作iFrame
...不是，我想让我在按section时显示iFrame。
当我推送作品集时，我想在模式窗口中显示详细信息。

喜欢这个

⬇︎⬇︎⬇︎

---

下面，我的固定代码

正确包含了jQuery，izimodal.css，izimodal.js。
（iFrame的内容是我拥有的html文件。）

HTML

<div class="list">
<div class="items">
 <section class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open=#iframe>
   <img src="img/1.png" alt="1" />
   <h2>title1</h2>
   <p>description1 description1</p>
 </section>
 <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#iframe>
   <img src="img/2.png" alt="2" />
   <h2>title2</h2>
   <p>description2 description2</p>
 </section>
 <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open=#iframe>
   <img src="img/3.png" alt="3" />
   <h2>title3</h2>
   <p>description3 description3</p>
 </section>
 <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open=#iframe>
   <img src="img/4.png" alt="4" />
   <h2>title4</h2>
   <p>description4 description4</p>
 </section>
 <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open=#iframe>
   <img src="img/5.png" alt="5" />
   <h2>title5</h2>
   <p>description5 description5</p>
 </section>
 </div>
</div>

jQuery

// In case of item1
$(document).on('click', '.item1', function (event) {
  event.preventDefault();
  $('#iframe').iziModal('open');
});
  $("#iframe").iziModal({
  iframe: true,
  width: '98%',
  ifremeHeight: '98%',
  zindex: '10',
  iframeURL: "data-1.html",
  group: 'works',
  overlayColor: 'rgba(0,0,0,0.1)',
});

如何激活iziModal并制作多个iFrame？

Answer 1

这只是一个建议，首先，您需要像下面这样从HTML传递新的URL：

<div class="list">
    <div class="items">
        <section class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open="#iframe" data-href="/iframe_url1">
            <img src="img/1.png" alt="1" />
            <h2>title1</h2>
            <p>description1 description1</p>
        </section>
        <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open="#iframe" data-href="/iframe_url2">
            <img src="img/2.png" alt="2" />
            <h2>title2</h2>
            <p>description2 description2</p>
        </section>
        <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open="#iframe" data-href="/iframe_url3">
            <img src="img/3.png" alt="3" />
            <h2>title3</h2>
            <p>description3 description3</p>
        </section>
        <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open="#iframe" data-href="/iframe_url4">
            <img src="img/4.png" alt="4" />
            <h2>title4</h2>
            <p>description4 description4</p>
        </section>
        <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open="#iframe" data-href="/iframe_url5">
            <img src="img/5.png" alt="5" />
            <h2>title5</h2>
            <p>description5 description5</p>
        </section>
    </div>
</div>

然后更改Javascript部分以更改iframe网址：

// CHANGE THE URL
    $('#iframe').iziModal('open',{
        iframeURL: $this.data('href')
    });