【bootstrap】Modal内での画面遷移する方法
どうやるのが1番いいのかわからないけど今回は以下の対応
・Modal内に複数ページのHTMLを入れておく
・現在のページ番号を変数に保持しておく
・[前へ][次へ]ボタンが押されるたびにページ番号を+または-してModal内を再表示
<div class="container" style="margin-top:5px;"> <button id="onModal" class="btn btn-default">Open</button> </div> <div id="myModal" class="modal fade"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- ページ1 --> <div id="modal-page1"> <div class="modal-header"> Page1 </div> <div class="modal-body"> <a href="#" class="btn btn-default btnNext">次へ</a> </div> </div> <!-- ページ2 --> <div id="modal-page2"> <div class="modal-header"> Page2 </div> <div class="modal-body"> <a href="#" class="btn btn-default btnPrev">前へ</a> <a href="#" class="btn btn-default btnNext">次へ</a> </div> </div> <!-- ページ3 --> <div id="modal-page3"> <div class="modal-header"> Page3 </div> <div class="modal-body"> <a href="#" class="btn btn-default btnPrev">前へ</a> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <script> // 表示中のページと最終ページ番号 var page, max = 3; $(function() { // Modalオープンボタン $("#onModal").click(function() { page = 1; drawModal(); $("#myModal").modal("show"); }); // 次へボタン $(".btnNext").click(function() { page++; drawModal(); }); // 前へボタン $(".btnPrev").click(function() { page--; drawModal(); }); // Modal内表示 function drawModal() { for (var i = 1; i <= max; i++) { if (i == page) $("#modal-page" + i).show() else $("#modal-page" + i).hide() } } }); </script>
iframe使ったほうが楽なのかな。。。以上です