Q&A
コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
前提・実現したいこと
こんにちは。
Jqueryでモーダルウィンドウを作り、その中で”次へ”や”戻る”ボタンを配置して、
次や前のモーダルウィンドウに遷移表示させたいです。
ある程度はできましたが、”次へ”、”戻る”ボタンが機能しません。
サンプルはこれです。
http://taihei-y.net/
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <div class="container"> <div class="col-lg-3" style="display: inline-block"> <a class="js-modal-open" href="" data-target="modal01"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220"/></a> <div id="modal01" class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <div class="modal__content"> <a class="js-modal-open" href="" data-target="modal01"> <video src="sampl-01.mp4"controls width="100%" height="auto"></video> </a> <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●</p> <a href="" class="back">戻る</a><a href="" class="next">次へ</a> <a class="js-modal-close" href="">閉じる</a> </div><!--modal__inner--> </div><!--modal--><h4><strong>●●●●●●●●</strong></h4> <p>●●●●●●●●●●●●</p> </div> <div class="col-lg-3" style="display: inline-block"> <a class="js-modal-open" href="" data-target="modal02"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220" /></a> <div id="modal02" class="modal js-modal"> <div class="modal__bg js-modal-close"></div> <div class="modal__content"> <a class="js-modal-open" href="" data-target="modal02"> <video src="sampl-01.mp4"controls width="100%" height="auto"></video> </a> <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●●●●●</p> <a href="" class="back">戻る</a><a href="" class="next">次へ</a> <a class="js-modal-close" href="">閉じる</a> </div><!--modal__inner--> </div><!--modal--><h4><strong>●●●●●●●●</strong></h4> <p>●●●●●●●●●●●●●●●●●●●●●●●●</p> </div> </div> </body> </html>
<style> .content{ margin: 0 auto;padding: 40px;} .modal{display: none;height: 100vh;position: fixed;top: 0;width: 100%;} .modal__bg{ background: rgba(0,0,0,0.8); height: 100vh;position: absolute;width: 100%;} .modal__content{ background: #fff;left: 50%;padding: 40px; position: absolute;top: 50%;transform: translate(-50%,-50%);width: 60%;} .back{margin: 10px;cursor: pointer;} .next{margin: 10px;cursor: pointer;} </style>
<script> $(function(){ $('.js-modal-open').each(function(){ $(this).on('click',function(){ var target = $(this).data('target'); var modal = document.getElementById(target); $(modal).fadeIn(); return false; }); }); $('.js-modal-close').on('click',function(){ $('.js-modal').fadeOut(); return false; }); $('.next').click(function () { $(this).parent().parent().fadeOut(); $(this).parent().parent().next().fadeIn(500); return false; }); $('.back').click(function () { $(this).parent().parent().fadeOut(); $(this).parent().parent().prev().fadeIn(500); return false; }); }); </script>
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ソースコードが多すぎて申し訳ございません。どなたお分かりになりますでしょうか？
回答1件
0
もっとちゃんとしたらモーダルライブラリ使ったほうがよいかもしれませんが
とりあえず今のHTMLの構造を見る限りこんな感じ
$('.next').click(function () { $(this).closest('.modal').fadeOut().closest('.col-lg-3').next().find('.js-modal-open').trigger('click');; return false; }); $('.back').click(function () { $(this).closest('.modal').fadeOut().closest('.col-lg-3').prev().find('.js-modal-open').trigger('click');; return false; });
投稿2021/01/08 08:21
総合スコア115010
yambejp様
早速ご回答いただき本当にありがとうございます。
動きました!!（すばらしい…） 本当に助かります。
また機会がありましたら、ご教授いただけますと幸いです。
有難うございました。
あなたの回答
tips
プレビュー
