element-ui - 模态对话框被不透明背景遮挡

Question

我正在使用 元素 的 Notification 组件，但是当它被激活时，对话框会出现，但似乎在同样引入的灰色背景的“后面”。单击任意位置可移除灰色背景并允许与对话框交互，但没有应过滤掉正常屏幕噪音的灰色背景。这是一个简短的视频，显示了各种状态:

video

放入组件的代码如下:

  <div class="add-address" @click="showAddDialog = true">
    +
  </div>
</div>
<el-dialog
  title="Add New Address"
  :visible.sync="showAddDialog"
  width="30%"
  :before-close="newAddressDialogClosed">
  <span>Postal Address</span>
  <el-input v-model="newAddress" type="text"></el-input>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">Cancel</el-button>
    <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
  </span>
</el-dialog>

我已经使用检查器来查看 CSS，但我还没有从 CSS 的角度或 Vue/Element 的角度理解导致这种情况的原因。任何帮助，将不胜感激。

我进一步分析了 HTML/CSS，该组件似乎在 DOM 中引入了两个单独的块:



下面的块是灰色背景，您希望它“模糊”页面并将注意力集中在模态上。但是，它位于对话框的前面。同样有趣的是，单击任意位置似乎针对灰色背景并将其关闭，但这样做也会对对话框中的位置产生微妙的影响，如下所示:



请注意，对话框的 z-index 大于背景，这对我来说很直观，但我认为这会将对话框放在最上面。猜猜这还不是全部。

我现在通过将背景更改为 display: none 来破解一个变通方法。然后在 DOM 中的模态对话框之前直接添加以下 HTML:

<div class="modal-background" v-if="showAddDialog"></div>

这些似乎证实了我的潜在怀疑，即在 DOM 树中放置很重要，并且组件尝试将模态背景放置在 DOM 的最后是有问题的。

Answer 1

我遇到了同样的问题，还发现更改对话框的 z-index 没有效果。当我嵌套了 Element.Eleme.io 元素时就会发生这种情况，这对您来说似乎也是如此。

z-index 并不像“更高总是意味着在顶部”那么简单。元素被分组到不同的堆叠上下文中；较低堆叠上下文中的元素不可能出现在较高堆叠上下文中的元素上方。因此，根据不同元素在 DOM 中呈现的位置，它们可以将自己置于不同的堆叠上下文中，并且注定彼此保持相同的关系，无论 z-index 发生了多少变化。 (有关 z-index 的更详细说明，请参阅 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/)。

使用 Chrome 开发工具进行检查，我发现遮蔽模态与对话框不在同一位置呈现；事实上，它被附加到主体，即在应用程序的外部，这似乎是它们不在同一堆叠上下文中的原因。有一个快速修复；对话框元素有一个属性“modalAppendToBody”。如果为 true，则将模态渲染到主体，如果为 false，则将其渲染到对话框的父元素。通过将其指定为 false，我设法解决了这个问题:

<el-dialog
  title="Add New Address"
  :visible.sync="showAddDialog"
  width="30%"
  :before-close="newAddressDialogClosed
  :modalAppendToBody="false">
</el-dialog>