我正在使用一个名为izimodal的模式jQuery插件。我正在尝试在模式窗口中显示iframe。
这样,原始元素将移至模式窗口。
怎么了?
似乎相关的代码:
我输入的用于实现分页的代码。
除非删除此模式窗口,否则它将无法工作。 (此分页代码也在上面的gif中被注释掉了)
即使删除此代码,原始元素也会像gif一样移动。
function tpl(data) {
var html = '';
$.each(data, function(index,item) {
html += '<section class="item">' + item + '</section>';
});
return html;
}
// ↑ Modal won't work unless I delete this
$(function() {
var len = $('.item').length;
$('#no-p').pagination({
dataSource: function(done) {
var result = [];
for (var i = 0; i < len; i++) {
var $item = $('.item').get(i);
if ($item) result.push($item.innerHTML);
}
done(result);
},
pageSize: 8,
showPageNumbers: false,
showNavigator: true,
autoHidePrevious: true,
autoHideNext: true,
callback: function(data,pagination) {
var html = tpl(data);
$('#items').html(html);
}
});
});
izimodal代码:
// In case of item1
$(document).on('click', '.item1', function (event) {
$(".item1").click(function (event) {
event.preventDefault();
$('#iframe').iziModal('open', {
iframeURL: $this.data('href')
});
});
$("#iframe").iziModal({
iframe: true,
width: '98%',
iframeHeight: 600,
zindex: '110',
iframeURL: "data.html",
group: 'works',
overlayColor: 'rgba(0,0,0,0.1)'
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>
<div class="list">
<div class="items">
<section id="iframe" class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open=#iframe data-href="/iframe_url1">
<img src="http://placehold.jp/253x180.png" alt="1" />
<h2>title1</h2>
<p>description1 description1</p>
</section>
<div id="modal"></div>
<section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#iframe data-href="/iframe_url2">
<img src="http://placehold.jp/253x180.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="http://placehold.jp/253x180.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="http://placehold.jp/253x180.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="http://placehold.jp/253x180.png" alt="5" />
<h2>title5</h2>
<p>description5 description5</p>
</section>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
为什么原始元素附加到模态窗口?
我很麻烦..请帮助我! x(