为什么点击源的元素会移动到模式窗口?

时间:2019-03-20 16:04:42

标签: javascript jquery html iframe

当前状态

like this
我正在使用一个名为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(

0 个答案:

没有答案