Stacked bootstrap modals:为什么在此代码中将modal backdrop插入到.modal中？

Question

This codepen提供了一种史诗般的方式来堆叠引导模式。我试图让它在我的应用程序中工作，但似乎在我的应用程序中，div.modal-backdrop被插入到body中，而在这个代码中，它被插入到.modal元素中。

<div class="modal fade" id="test-modal" data-modal-index="1">
  <div class="modal-dialog">
    <div class="modal-content">
      [...]
    </div>
  </div>
</div>

Answer 1

事实证明，答案是代码使用的是bootstrap 3.3.1，而我使用的是3.3.7。我没有料到如此小的版本变化会带来如此巨大的变化，但我们就在这里。

我需要更像旧引导程序的功能，所以现在我正在考虑将3.3.1中的模态代码复制为一种modal2模块。

编辑：试过了，效果不是很好。为了获得正确的功能，我最终做的是让多个背景都有一个偏移量的z-index，然后定制我的特定模式：

.modal-backdrop + .modal-backdrop {
  z-index: 1038; /* instead of 1040 */
}

#outcomesModal.in.aside {
  z-index: 1039;
}

所以现在情态，当把“放在一边”是在两个背景之间。请注意(与代码不同)我必须将“.modal”类应用到.modal，而不是.modal-dialog