Q&A
前提・実現したいこと
HTMLでMagnific Popupを使って同一ページで、いくつかの外部ファイル(HTML)をモーダルで表示しようとしています。
エリア外と閉じるボタンのみで消えるようにしたいですが、ポップアップをクリックすると消えてしまいます。
発生している問題・エラーメッセージ
表示したモーダルのエリア内をクリックすると消えてしまうため、これを直したいです。
ポップアップの表示と、エリア外、閉じるボタンは正常に動きます。
該当のソースコード
idやClassなど入っていた箇所を一部""のみにしています
html
1<div class=""> 2<ul id=""> 3<div class=""> 4<li><a href="A.html" target="_newWindow" class="modalpopup"><span class="A"><img src="A.png"></span>A</a></li> 5<li><a href="B.html" target="_newWindow" class="modalpopup"><span class="B"><img src="B.png"></span>A</B></li> 6<li><a href="C.html" target="_newWindow" class="modalpopup"><span class="C"><img src="C.png"></span>A</C></li> 7<li><a href="D.html" target="_newWindow" class="modalpopup"><span class="D"><img src="A.png"></span>D</a></li> 8</ul> 9</div></div>
JS
1<script type="text/javascript"> 2$(function() { 3 $('.modalpopup').magnificPopup({ 4 type: 'ajax', 5 overflowY: 'scroll' 6 }); 7 }); 8</script>
試したこと
<div>で囲ってみましたが同じ動きでした。
<div> <a href="A.html" target="_newWindow" class="modalpopup"><span class="A"><img src="A.png"></span>A</a> </div>
あなたの回答
tips
プレビュー
