6

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

视频

将组件放入的代码如下：

  <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 的最末端是有问题的。

4

2 回答 2

26

我遇到了同样的问题，还发现更改对话框的 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>
于 2018-05-01T17:28:07.653 回答
0

您可以使用名为 z-index 的 CSS 属性

任何你想设置回来的对象？你只需要设置 z-index: -1; // 或更多，或者您想将任何对象设置在另一个对象的前面？你只需要设置 z-index: 1; //或者更多

查看 Snipet 了解更多信息：

.a {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.b {
    margin-top:150px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1> I am on Image</h1>

<img class="a" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">
<br>
<br>
<br>
<br>
<h1> Image is on me</h1>

<img class="b" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" width="100" height="140">

</body>
</html>

于 2017-12-19T13:19:19.230 回答