bootstrapのモーダルを複数開いたときの問題と対処法

標準の挙動

背景（.modal-backdrop）はmodalごとに、bodyにappendされる（z-indexは.modalのz-index設定値 - 10）

z-indexのスタック文脈について詳しい記事
z-index再入門 - z-indexの仕組み | CodeGrid

問題点

モーダルの数、重なりに関係なく .modalは.modal-backgroupより上に表示される。

対処法

.modalと.modal-backdropのz-indexをstackされている要素を考慮するようにhackする

common.js

$(document).on('show.bs.modal', '.modal', function () {
    var zIndex = 1040 + (10 * $('.modal:visible').length);
    $(this).css('z-index', zIndex);
    setTimeout(function() {
        $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
    }, 0);
});

参考になったURL