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