【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使ったほうが楽なのかな。。。以上です