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

我正在使用Element的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中引入了两个独立的块:

enter image description here

较低的块是灰色背景,您希望“模糊”页面并将注意力集中在模态上.然而,它在对话框的前面.同样令人感兴趣的是,点击任何地方似乎都是以灰色背景为目标并将其关闭但是这样做也会对对话框上的位置产生微妙的影响,如下所示:

enter image description here

请注意,对话框的z-index大于直觉上对我有意义的背景,但我认为这会将对话框置于顶部.猜猜这不是全部.

我现在通过更改背景显示:none来破解解决方法,然后在DOM中的模式对话框之前直接添加以下HTML:

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

这似乎验证了我的潜在怀疑,即DOM树中的放置很重要,并且组件尝试将模态背景放在DOM的最末端是有问题的.

最佳答案
我有同样的问题,也发现更改对话框的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开发工具检查,我发现隐藏模态不会与对话框在同一个地方呈现;事实上,它附加在身体上,即在应用程序的外部范围内,这似乎是它们不在同一堆叠环境中的原因.有一个快速解决方案; dialog元素有一个属性“modalAppendToBody”.如果为true,则模态将呈现给正文,如果为false,则呈现给对话框的父元素.通过将其指定为false,我设法解决了这个问题:

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

转载注明原文:element-ui – 模糊对话框被不透明背景遮挡 - 代码日志