modal>背景>导航

Question

[底部的问题]

Bootstrap版本的背景

Bootstrap 3.3.2将暗模式覆盖（.modal-backdrop）放在.modal下。

从3.3.4版本开始，它放在<body>下。

在3.3.4中，某些元素的z-index变为不可能。

我在3.3.2上做了模态化处理。现在我需要将Bootstrap升级到4.x，但是让我用3.3.4来说明问题。

页面是固定位置的导航。单击按钮显示模式。

导航需要处于背景之下。在背景顶部的模态。所以

所需的堆叠顺序为

模式在HTML的导航中

<.nav>
    <.modal></.modal>
</.nav>

在模态下附加背景（通过引导程序）的地方，我已经完成了所需的顺序。

<.modal>
    <.modal-backdrop></...>
    <.modal-dialog></...>
</.modal>

<body>
    <div>
        <.modal>
            <.modal-dialog></...>
        </.modal>
    </div>

    <.modal-backdrop></...>
</body>

当导航在背景之下时，导航中的所有内容（包括模式在内）都在背景之下。似乎不可能将任何东西的堆叠顺序设置在nav和nav的后代之间。

我知道，如果将模式作为<body>的子代放置，事情会很容易，但是这种结构上的变化会引起其他实现问题（nav是一个模块，nav之外的东西不知道模式的内容）。

通过js将背景拉到模态下是可以的，但是会引起其他问题：
1.更改z-index时按钮上闪烁。
2.无法通过单击背景关闭。
请参阅3.3.4演示中的按钮nav 3 Open modal。

在较新的Bootstrap上，模态仍处于导航状态下，如何进行所需的堆栈顺序？