Bootstrapでモーダルを重ねる

【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>

以上、お疲れさまでした。