概要
モーダルからモーダルを呼び出して、元のモーダルに戻る実装を紹介する。
便宜上、最初に呼び出すモーダルを「1段目のモダール」と呼ぶ。1段目のモダールから呼び出されるモーダルを「2段目のモーダル」と呼ぶ。
詳細
1段目のモーダルから2段目のモーダルを呼び出す。
2段目のモーダルでYesのアクションをすると、1段目のモーダルに表示される情報が更新され1段目のモーダルが表示される。
2段目のモーダルから呼び出された1段目のモーダルは更新済の情報を表示する。
あるボタンをクリックして1段目のモダールを表示する
$('#first').on('click', function() { $("#firstModal").modal(); });
1段目のモーダル
<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">×</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>
表示された1段目モーダルを消して、2段目モーダルをを表示する
$("#second").on("click", function() { $("#secondModal").modal(); });
2段目のモーダル
<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">×</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>
表示された2段目モーダルを消して、1段目モーダルを表示する
$('#secondModal').on('hide.bs.modal', function() { $("#firstModal").modal(); });
まとめ
以上、2段階モーダルの実装方法でした。