クリック元の要素がモーダルウインドウ側に移動する場合の対処

前提・実現したいこと

izimodalというモーダルウインドウのjQueryプラグインを使っています。
そして、iFrameをモーダルに表示しようとしています。

発生している問題

このようにクリック元の要素が、モーダル側に表示されてしまいます。

該当のソースコード

jQuery
1// izimodal
2$(document).on('click', '.item1', function (event) {
3  $(".item1").click(function (event) {
4    event.preventDefault();
5    $('#iframe').iziModal('open', {
6      iframeURL: $(this).data('href')
7    });
8  });
9  $("#iframe").iziModal({
10    iframe: true,
11    width: '98%',
12    iframeHeight: 600,
13    zindex: '110',
14    iframeURL: "data.html",
15    group: 'works',
16    overlayColor: 'rgba(0,0,0,0.1)'
17  });
18});

HTML
1<head>
2<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>
3</head>
4
5<body>
6<div class="list">
7<div class="items">
8 <section id="iframe" class="item item1" data-izimodal-iframeurl="data-1.html" data-izimodal-open=#iframe data-href="/iframe_url1">
9   <img src="http://placehold.jp/253x180.png" alt="1" />
10   <h2>title1</h2>
11   <p>description1 description1</p>
12 </section>
13 <div id="modal"></div>
14 
15 <section class="item item2" data-izimodal-iframeurl="data-2.html" data-izimodal-open=#iframe data-href="/iframe_url2">
16   <img src="http://placehold.jp/253x180.png" alt="2" />
17   <h2>title2</h2>
18   <p>description2 description2</p>
19 </section>
20 
21 <section class="item item3" data-izimodal-iframeurl="data-3.html" data-izimodal-open=#iframe data-href="/iframe_url3">
22   <img src="http://placehold.jp/253x180.png" alt="3" />
23   <h2>title3</h2>
24   <p>description3 description3</p>
25 </section>
26 
27 <section class="item item4" data-izimodal-iframeurl="data-4.html" data-izimodal-open=#iframe data-href="/iframe_url4">
28   <img src="http://placehold.jp/253x180.png" alt="4" />
29   <h2>title4</h2>
30   <p>description4 description4</p>
31 </section>
32 
33 <section class="item item5" data-izimodal-iframeurl="data-5.html" data-izimodal-open=#iframe data-href="/iframe_url5">
34   <img src="http://placehold.jp/253x180.png" alt="5" />
35   <h2>title5</h2>
36   <p>description5 description5</p>
37 </section>
38 
39 </div>
40</div>
41
42<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
43<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>
44</body>

試したこと

他にページネーションのプラグインを入れているのですが、この部分がどうやら影響していることがわかりました。
この部分を削除しないと、モーダルウインドウは出てこないからです。消してモーダルが出てきても挙動がおかしいですが…
（上のgifでもここをコメントアウトしています）

jQuery
1function template(data) {
2  var html = '';
3  $.each(data, function(index,item) {
4      html += '<section class="item">' + item + '</section>';
5  });
6  return html;
7}

念のため、ページネーションのコードの全体像を載せておきます。

jQuery
1function template(data) {
2  var html = '';
3  $.each(data, function(index,item) {
4      html += '<section class="item">' + item + '</section>';
5  });
6  return html;
7}
8// ↑上記と同じ
9
10$(function() {
11  var len = $('.item').length;
12
13  $('#num').pagination({
14    dataSource: function(done) {
15      var result = [];
16      for (var i = 0; i < len; i++) {
17        var $item = $('.item').get(i);
18        if ($item) result.push($item.innerHTML);
19      }
20      done(result);
21    },
22    pageSize: 8,
23    showPageNumbers: false,
24    showNavigator: true,
25    autoHidePrevious: true,
26    autoHideNext: true,
27    callback: function(data,pagination) {
28      var html = template(data);
29      $('#items').html(html);
30    }
31  });
32});

どうしてクリック元の要素が移動してしまうのでしょうか。
とても困っています。なにか少しでも情報があれば教えてください。

現状

jQuery
1// そういえばHTMLに#modalという空divを作っていたので
2$(document).on('click', '.item1', function (event) {
3  $(".item1").click(function (event) {
4    event.preventDefault();
5    $('#modal').iziModal('open', {  // #iframe → #modal に変更
6      iframeURL: $(this).data('href')
7    });
8  });
9  $("#modal").iziModal({  // #iframe → #modal に変更
10    iframe: true,
11    width: '98%',
12    iframeHeight: 600,
13    zindex: '110',
14    iframeURL: "data.html",
15    group: 'works',
16    overlayColor: 'rgba(0,0,0,0.1)'
17  });
18});

今はこのような感じです。
① ページ読み込みして1度目はうまく表示されるのですが、閉じて2度目以降はこのように一瞬だけ表示されて消えてしまう。

② ページを読み込むとこのように a と b の間に謎の空間が生まれてしまう。（最初のクリックをすると元に戻りますが、気になります）

ちなみに、③ ページネーションの該当部を付けているとこのように、どこをクリックしてもモーダルが反応しません。
他のJSコードを一つ一つコメントアウトしながら確認しましたが、やはり上述のページネーションの該当部をコメントアウトしないとモーダルウインドウは動作しませんでした。

モーダルウインドウもページネーションも両方付けたいです。

問題が複数になってしまいましたが、何が原因なのでしょうか？

行動規範の内容に同意します

回答1件

Q1．ページネーションのプラグインが影響してモーダルが表示されない
→ プラグインが影響しているわけではなく、iziModal.jsの読み込みがjquery.min.jsより前だからだと思われます。
※JSFiddleで確認したところ、プラグインがあっても無くてもモーダルは動作いたしました。

Q2．クリック元の要素がiframeへ移動してしまう
→ クリック元の要素（この場合<section id="iframe" class="item item1">）にid="iframe"を付けているためです。
空のdivか何かに、id="iframe"を付与したものを設置してはいかがでしょうか。

投稿2019/03/22 01:57

Yousuck

総合スコア349

yu_6

2019/03/22 04:29

ご回答ありがとうございます。 jQueryとiziModalの順番は間違えて書いてしまっていました…ごめんなさい。自分の所ではjQueryが先になっています。空のdivにidを付けて設置した所、1度目はうまく表示されるのですが、2度目以降クリックすると一瞬だけ表示されて消えてしまいます。どうしてなのでしょうか？文字だけでは分かりづらいので投稿に現状gif等を追加しました。よければ見てください。

Yousuck

2019/03/22 09:33

1度目はうまく表示されるというのがこちらでは再現できませんが、#modalに変更したのであれば <section>のプロパティdata-izimodal-openの値も#modalに変更しないといけないのではないでしょうか～あとこの値、現状""（ダブルクォーテーション）やらで括ってないですが、これはiziModalの仕様上、この記述法で良かったのでしょうか～ご確認くださいまし～

yu_6

2019/03/22 09:54

あ、すみませんdata-izimodal-openの所も#modalにしていての結果です。ダブルクオーテーションで囲ったのですが変わりありませんでした…ありがとうございました。

行動規範の内容に同意します