bootstrap中多个modal弹出的问题解决方案

在bootstrap的官网中了解到modal弹出只是支持单个，对于嵌套的modal并没有提供相应的解决方案，本文这里就根据网上找到的案例进行整理得到。

解决方案
主要是通过对modal的zindex进行赋值，使最新弹出的modal总是在最前面的。

$(document).ready(function () {
    // 通过该方法来为每次弹出的模态框设置最新的zIndex值，从而使最新的modal显示在最前面
        $(document).on('show.bs.modal', '.modal', function (event) {
            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);
        });
    });

Paste_Image.png

整个样例代码如下：

    
    
    
    


 
层叠的Bootstrap Modal样例

 弹出第一个modal


    

        

            

                ×
                    
第一个Modal

            
            

            

            
这是第一个modal，接下来弹出的modal会以这个为基准弹出新的modal框

                
    弹出另一个modal

            
            
  关闭
                保存

            
        
    


    

        

            

                ×
                    
第二个modal

            
            

            

                这是另一个modal，是在前一个modal的基础上弹出一个新的模态框
                

                
    
                弹出第三个modal

            
            
  关闭
    保存

            
        
    


    

        

            

                ×
                    
Modal 3

            
            

            

                百度提供的一些cdn库

            
            
  关闭