Question

This codepen具有堆叠引导模态的史诗方式。我试图让它在我的应用中运行，但似乎div.modal-backdrop已插入我的应用中的body，而它已被插入.modal 1}}此代码中的元素。

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

Answer 1

原来，答案是codepen使用的是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;
}

所以现在的模式，放在＆＃34;旁边＆＃34;是在两个背景之间。请注意（与codepen不同）我必须应用＆＃34;旁边＆＃34;类为.modal，而不是.modal-dialog

堆叠的bootstrap模式：为什么在这个codepen中是插入.modal中的模态背景？

1 个答案: