Bootstrap 多弹窗（模态窗），第二层覆盖前一层解决办法

问题说明：最近公司遇到了一个需求，需要在bootstrap一个模态窗上再弹出一个模态窗，出现，第二个模态窗被第一个模态窗覆盖的问题，很是尴尬。

解决方案：在网上查阅了很多博客，都说是要各种修改bootstrap的源码之类的，复杂且不一定有效。下一行是重点。

解决这个问题的关键点在于你的模态窗页面代码的顺序。只要将代码顺序按照你想要的弹出窗顺序排列皆可以解决这个问题！如，第一层在前，第二层在后
--------------------- 
作者：逸風满楼 
来源：CSDN 
原文：https://blog.csdn.net/first_ket/article/details/78133142 
版权声明：本文为博主原创文章，转载请附上博文链接！

 

 

 

解决方式二：

这个不是本人原创，不好意思，不记得哪位大神的作品了，在这里表示敬意

默认情况下，bootstrap模态框是不支持多个覆盖的，下面是一个解决办法(本人亲测),

将下面的代码复制到当前需要多个模态框的页面，问题就可以解决，如图:

$(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');
    }