bootstrap多个模态框关闭问题

项目中使用模态框的时候会关闭所有

解决方法

jQuery(function($){
        //解决模态框背景色越来越深的问题
        $(document).on('show.bs.modal', '.modal', function(event) {
            $(this).appendTo($('body'));
        }).on('shown.bs.modal', '.modal.in', function(event) {
            setModalsAndBackdropsOrder();
        }).on('hidden.bs.modal', '.modal', function(event) {
            setModalsAndBackdropsOrder();
        });

        function setModalsAndBackdropsOrder() {
            var modalZIndex = 1040;
            $('.modal.in').each(function(index) {
                var $modal = $(this);
                modalZIndex++;
                $modal.css('zIndex', modalZIndex);
                $modal.next('.modal-backdrop.in').addClass('hidden').css('zIndex', modalZIndex - 1);
            });
            $('.modal.in:visible:last').focus().next('.modal-backdrop.in').removeClass('hidden');
        }

        //覆盖Modal.prototype的hideModal方法
        $.fn.modal.Constructor.prototype.hideModal = function () {
            var that = this
            this.$element.hide()
            this.backdrop(function () {
                //判断当前页面所有的模态框都已经隐藏了之后body移除.modal-open，即body出现滚动条。
                $('.modal.fade.in').length === 0 && that.$body.removeClass('modal-open')
                that.resetAdjustments()
                that.resetScrollbar()
                that.$element.trigger('hidden.bs.modal')
            })
        }
    });

效果

整体代码

    

        

            

                

                    ×
                    
这是第一个模态框
                
                

                    
第一个模态框中的文本
                
                

                    弹出第二个模态框
                    关闭
                
            
        
    
    

        

            

                

                    ×
                    
这是第二个模态框
                
                

                    
第二个模态框中的文本
                
                

                    弹出第三个模态框
                    关闭
                
            
        
    
    

        

            

                

                    ×
                    
这是第三个模态框
                
                

                    
第三个模态框中的文本
                
                

                    
                    关闭
                
            
        
    
    
发动演示模态框