【javascript】Bootstrap으로 모달을 거듭하고 싶다!

보통 두 개의 모달을 표시하려고하면 아래로 들어가서 대응하지 않습니다.
z-index 를 설정해 주면 움직이는 것 같습니다.

환경: bootstrap3

$(function() {
    // Modal on Modal
    $(document).on('shown.bs.modal', '.modal', function (event) {
        var zIndex = Math.max.apply(null, Array.prototype.map.call(document.querySelectorAll('*'), function(el) {
              return +el.style.zIndex;
            })) + 10;
        $(this).css('z-index', zIndex);
        setTimeout(function() {
            $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });
});

삭제 확인 용 모달 · 예

호출 방법 · 예

호출 부분

<a data-toggle="modal" data-id="" href="#deleteConfirmModal" class="openDeleteModal"><button type="button" /></a>

겹치는 모달 부분

  <div id="deleteConfirmModal" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
              <p>確認</p>
              <div class="alert alert-success hide" role="alert" id="messageSuccessConfirmModal" style="word-break: break-all;"></div>
              <div class="alert alert-danger hide" role="alert" id="messageErrorConfirmModal" style="word-break: break-all;"></div>
            </div>
            <div class="modal-footer"id="updateConfirmModalButtons">
              <button type="button" data-dismiss="modal" class="btn">キャンセル</button>
              <button type="button" class="btn btn-primary"
                id="deleteConfirmModalButton" data-id="" data-loading-text="Setting...">削除</button>
            </div>
            <div class="modal-footer hide" id="completeConfirmModalButtons">
              <button type="button" class="btn btn-default"
                data-dismiss="modal" onclick="location.reload(true);">リロード</button>
            </div>
        </div>
    </div>

이상, 수고하셨습니다.