iFrame无法使用jQuery插件iziModal响应。有什么问题?

时间:2019-03-09 04:40:47

标签: javascript jquery html iframe

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

喜欢这个

push

⬇︎⬇︎⬇︎

&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)',
});

0 个答案:

没有答案