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

概要

モーダルからモーダルを呼び出して、元のモーダルに戻る実装を紹介する。
便宜上、最初に呼び出すモーダルを「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">&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>

表示された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">&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>

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

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

まとめ

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

Let's share SNS