Bootstrap ２段階モーダルの実装方法

概要

モーダルからモーダルを呼び出して、元のモーダルに戻る実装を紹介する。
便宜上、最初に呼び出すモーダルを「１段目のモダール」と呼ぶ。１段目のモダールから呼び出されるモーダルを「２段目のモーダル」と呼ぶ。

詳細

１段目のモーダルから２段目のモーダルを呼び出す。
２段目のモーダルでYesのアクションをすると、１段目のモーダルに表示される情報が更新され１段目のモーダルが表示される。
２段目のモーダルから呼び出された１段目のモーダルは更新済の情報を表示する。

あるボタンをクリックして１段目のモダールを表示する

$('#first').on('click', function() {
  $("#firstModal").modal();
});

１段目のモーダル

<div class="modal fade" id="firstModal" tabindex="-1">
  <div class="modal-dialog modal-xlg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">サンプルリスト</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <span>サンプルbody</span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-primary" id="second" data-dismiss="modal">アップロード</button>
      </div>
    </div>
  </div>
</div>

表示された１段目モーダルを消して、２段目モーダルをを表示する

$("#second").on("click", function() {
  $("#secondModal").modal();
});

２段目のモーダル

<div class="modal fade" id="secondModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">サンプル確認</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">アップロードしますか？</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">アップロード</button>
      </div>
    </div>
  </div>
</div>

表示された２段目モーダルを消して、１段目モーダルを表示する

$('#secondModal').on('hide.bs.modal', function() {
  $("#firstModal").modal();
});

まとめ

以上、２段階モーダルの実装方法でした。