【Bootstrap】解决打开多个模态框层次问题与滚动条问题

<script>
    var modal_index = 0;
    var modal_array = [];

    $(document).on('show.bs.modal','.modal',function() {
        //加入一个模态框
        modal_index++;
        modal_array.push($(this));

        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);
        $(this).on('hidden.bs.modal', function() {
            //移除一个模态框
            modal_index--;
            //移除绑定事件
            modal_array[modal_index].off('hidden.bs.modal');
            
            modal_array.pop();

            //如果还有模态框，则继续加入模态框打开样式
            if(modal_index === 0){
                $('body').removeClass('modal-open');
            }else{
                $('body').addClass('modal-open')
            }
        });
    });
</script>