Q&A
「モーダル間の遷移」とは具体的にはどのような動作を期待しているのかわかりませんでした。もう少し詳しく教えていただけますか？ モーダルウィンドウをスライドショーしたいとかそういうことでしょうか？
前提・実現したいこと
質問をご参照いただきありがとうございます！
★モーダルウィンドウを開きスクロールして閉じた後に再度同じモーダルを開くと、閉じた時と同じ位置から表示されてしまうので、モーダルを最初に開いた時同様にモーダル内のトップの位置から開けるようにしたいです。
★モーダル用のリンクを複数作成しているのですが、そのモーダル間の遷移を可能にしたいです。
知識が不十分で大変恐縮ですが、どうぞよろしくお願いします。
該当のソースコード
HTML
1<section> 2 <div> 3 <!-- モーダルのリンク元 --> 4 <a class="js-modal-open" href="" data-target="modal01"> 5 <div> 6 <img src="images/image01.jpg" alt="image"> 7 </div> 8 <p>01</p> 9 </a> 10 </div> 11 <div> 12 <a class="js-modal-open" href="" data-target="modal02"> 13 <div> 14 <img src="images/image02.jpg" alt="image"> 15 </div> 16 <p>02</p> 17 </a> 18 </div> 19 <div> 20 <a class="js-modal-open" href="" data-target="modal03"> 21 <div> 22 <img src="images/image03.jpg" alt="image"> 23 </div> 24 <p>03</p> 25 </a> 26 </div> 27 <!-- モーダル --> 28 <div id="modal01" class="modal js-modal"> 29 <div class="modal__bg js-modal-close"></div> 30 <div class="body"> 31 <div class="main"> 32 <div class="modal__content"> 33 <section> 34 <p>モーダル01</p> 35 <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p> 36 </section> 37 <section class="pagination"> 38 <div class="pagination-wrapper"> 39 <a href="#" data-target="#modal02"> 40 <div class="next"> 41 <p>次へ</p> 42 </div> 43 </a> 44 </div> 45 </section> 46 </div> 47 <a class="js-modal-close" href=""><img src="images/close.jpg" alt="閉じる"></a> 48 </div> 49 </div> 50 </div> 51 <div id="modal02" class="modal js-modal"> 52 <div class="modal__bg js-modal-close"></div> 53 <div class="body"> 54 <div class="main"> 55 <div class="modal__content"> 56 <section> 57 <p>モーダル02</p> 58 <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p> 59 </section> 60 <section class="pagination"> 61 <div class="pagination-wrapper"> 62 <a href="#" data-target="#modal01"> 63 <div class="prev"> 64 <p>前へ</p> 65 </div> 66 </a> 67 <a href="#" data-target="#modal03"> 68 <div class="next"> 69 <p>次へ</p> 70 </div> 71 </a> 72 </div> 73 </section> 74 </div> 75 <a class="js-modal-close" href=""><img src="images/close.jpg" alt="閉じる"></a> 76 </div> 77 </div> 78 </div> 79 <div id="modal03" class="modal js-modal"> 80 <div class="modal__bg js-modal-close"></div> 81 <div class="body"> 82 <div class="main"> 83 <div class="modal__content"> 84 <section> 85 <p>モーダル03</p> 86 <p>01</p><p>02</p><p>03</p><p>04</p><p>05</p> 87 </section> 88 <section class="pagination"> 89 <div class="pagination-wrapper"> 90 <a href="#" data-target="#modal02"> 91 <div class="prev"> 92 <p>前へ</p> 93 </div> 94 </a> 95 </div> 96 </section> 97 </div> 98 <a class="js-modal-close" href=""><img src="images/close.jpg" alt="閉じる"></a> 99 </div> 100 </div> 101 </div> 102</section>
CSS
1.modal { 2 display: none; 3 width: 100%; 4 height: 100%; 5 position: fixed; 6 top: 0; 7 left: 0; 8 z-index: 1; 9} 10.modal__bg { 11 width: 100%; 12 height: 100%; 13 position: fixed; 14 top: 0; 15 left: 0; 16 background: rgba(0,0,0,0.8); 17 cursor: pointer; 18} 19.body { 20 width: 100%; 21 height: 100%; 22} 23.main { 24 padding: 2.5rem; 25} 26.modal__content { 27 position: fixed; 28 width: 90vw; 29 height: 90vh; 30 background: #fff; 31 padding: 25px; 32 box-sizing: border-box; 33 top:50%; 34 left: 50%; 35 transform: translate(-50%,-50%); 36} 37.modal section p { 38 height: 300px; 39 border: 1px solid #000; 40}
jQuery
1$(function(){ 2 var winScrollTop; 3 $('.js-modal-open').each(function(){ 4 $(this).on('click',function(){ 5 //スクロール位置を取得 6 winScrollTop = $(window).scrollTop(); 7 var target = $(this).data('target'); 8 var modal = document.getElementById(target); 9 $(modal).fadeIn(1000); 10 $(".modal__content").css('overflow-y','scroll'); 11 return false; 12 }); 13 }); 14 $('.js-modal-close').on('click',function(){ 15 $('.js-modal').fadeOut(); 16 $('body,html').stop().animate({scrollTop:winScrollTop}, 500); 17 return false; 18 }); 19}); 20 21/* モーダル間遷移用のjQuery */ 22$(function(){ 23 /* Modal2へのボタン押下時のイベント */ 24 $('#to-modal02').on('click', function() { 25 changeModal('modal01', 'modal02'); 26 }); 27 $('#to-modal03').on('click', function() { 28 changeModal('modal02', 'modal03'); 29 }); 30 $('#to-modal02').on('click', function() { 31 changeModal('modal03', 'modal02'); 32 }); 33 $('#to-modal01').on('click', function() { 34 changeModal('modal02', 'modal01'); 35 }); 36 /* モーダルの切り替え */ 37 function changeModal(beforeModal, afterModal) { 38 $('#'+beforeModal).modal( 'hide' ); 39 $('#'+afterModal).modal('show'); 40 } 41});
試したこと
①知識が不十分で大変お恥ずかしいのですが、
$(modal).fadeIn(1000);
の前や後ろに
$(modal).animate({ scrollTop: 0 });
を追加したり、
https://teratail.com/questions/242928
の質問を元に点検しましたが解決しませんでした。
②https://qiita.com/tomlaw/items/1fd8edc9ca1522ad270e
を参考に、HTMLファイルに
data-target="modal01"
data-target="modal02"
data-target="modal03"
をそれぞれ追加し、jQueryファイルにもモーダル間遷移用のjQueryを追加しましたが、やり方が間違っているようで効きませんでした。
補足情報（FW/ツールのバージョンなど）
今回作成したjQueryファイルは、
【jQuery・CSS】意外と簡単！モーダルウィンドウをプラグインなしで作る
のサンプル3を参考にしました。
使用ブラウザ：Chrome
使用エディタ：Visual Studio Code
わかりづらく申し訳ありません。
例えば
・「モーダル2」内の「次へ」をクリックすると「モーダル2」が閉じると同時に「モーダル3」が表示される。
・「モーダル2」内の「前へ」をクリックすると「モーダル2」が閉じると同時に「モーダル1」が表示される。
というものです。
回答1件
0
ベストアンサー
$(modal).animate({ scrollTop: 0 });
スクロールしている要素に効かせる必要がありますので、$(".modal__content").animate({ scrollTop: 0 });ではないですか？
HTMLファイルに
data-target="modal01"
data-target="modal02"
data-target="modal03"
をそれぞれ追加
とりあえず、ご提示のコードはdata-target="#modal01"となっているようですので、今一度ご確認されては？
また前提として、参考にされているページは Bootstrap を利用していますが、ご提示のコードの場合はそれを読み込んでいないように思えます。
また、ご提示のコードの場合、$('.js-modal-open')をクリックした時にモーダルが開くように書かれていますので、それもお忘れではないでしょうか？
さらに言えば、別のモーダルに移るということは、現在のモーダルを閉じる必要がありますので、その部分についてもどうするのか考える必要があるのではないかと思いました。
投稿2021/11/15 04:53
総合スコア36912
①確かにそうでした。当てる要素を勘違いしてしまっていました。
修正したら効きました。
ありがとうございます！
②Bootstrapを利用しているページだったのですね。
知識が足りず、見落としもあって気付きませんでした。。すみません！
Bootstrapはまだ使ったことがないのですが、モーダルを閉じる仕組みも含めて、もっと勉強してみようと思います。
大変助かりました。
ありがとうございました。
あなたの回答
tips
プレビュー
