如何实现多个模态框嵌套

最近做项目的时候用到了Bootstrap的模态框插件，官方文档里面 特别清楚提示了一条：

但是我就想模态框上叠模态框怎么办呢，机智如我的想到可以给上面的模态框加一个更大的z-index值，这样不就可以显示在上面了 吗，我这里因为只有两个模态框嵌套，所以直接修改最上面那个模态框的z-index的值就好，那如果需要更多的模态框嵌套该怎么办呢，一个一个去修改太麻烦了，然后我就在网上找到这样一个方法：

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

PS：这个方法还没试过，不敢保证好用，只是找到贴出来，以防以后用得上。

关闭子模态框父模态框也关闭？

前面解决好了多个模态框重叠嵌套的问题，本以为可以美滋滋的 继续往下做项目了，结果又发现了另外一个更严重的问题，当我把最上面打开的子模态框关掉以后，为什么下面的父模态框也没了？？看起来官网说得对：

千万不要在一个模态框上重叠另一个模态框

可我还是想套一起用咋办呢，我就又去了万能的**，然后找到了解决方法，这次需要修改一下Bootstrap的源码了，先找到这一行：

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]', $.proxy(this.hide, this))

然后把他改成：

this.$element.on('click.dismiss.bs.modal', '[data-dismiss="modal"]:first', $.proxy(this.hide, this))

这样就不会出现关闭上面的模态框下面也跟着关掉的问题了。

滚动条怎么不见了？

在上面两个问题都搞定了以后，我以为不会再有bug了，然而，，事实上。。

某天我在模态框上瞎点的时候，突然发现我把上面的模态框关掉以后，下面父模态框的滚动条不见了，，当时我就傻了，这父模态框最底下还有按钮呢，滚动条没了怎么点按钮啊，于是我就打开控制台研究了一下这个模态框的结构，然后发现，在这个模态框打开的时候，Bootstrap会给body加一个叫modal-open的class，然后打开的模态框上面有这样一个CSS：

.modal-open .modal {overflow-x:hidden;overflow-y:auto}

当你把任意一个模态框关掉的时候，body上的class就没了，上面这个CSS 也就不生效了，所以就出现了滚动条神秘消失的问题，知道了是这个原因就好办了，只要给这个模态框上加一条style="overflow: auto"不就好了吗，就像下面这样：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="overflow: auto;">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header"></div>
      <div class="modal-body"></div>
      <div class="modal-footer"></div>
    </div>
  </div>
</div>

加上之后一试滚动条果然还在。我改完了之后想知道有没有其他的方法就去搜了一下，结果搜到了和我一样的方法，，emmmm那就这样吧。

参考链接

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

关于bootstrap的modal弹出层嵌套子Modal所引发的血案

bootstrap多层模态框滚动条消失的问题