前提・実現したいこと
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コードを一つ一つコメントアウトしながら確認しましたが、やはり上述のページネーションの該当部をコメントアウトしないとモーダルウインドウは動作しませんでした。
モーダルウインドウもページネーションも両方付けたいです。
問題が複数になってしまいましたが、何が原因なのでしょうか?
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/22 04:29
2019/03/22 09:33
2019/03/22 09:54