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

Question

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

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 中引入了两个单独的块：

下面的块是灰色背景，您希望 "blur" 页面并将注意力集中在模式上。但是，它位于对话框的前面。同样有趣的是，单击任何地方似乎都以灰色背景为目标并将其关闭，但这样做也会对对话框中的位置产生微妙的影响，如下所示：

请注意，对话框的 z-index 大于背景，这在我看来很直观，但我认为这会将对话框置于顶部。我想这还不是全部。

我现在通过将背景更改为 display: none 然后在 DOM 中的模态对话框之前直接添加以下 HTML 来解决问题：

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

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

Answer 1

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

您要设置为后退的任何对象？你只需要设置 z-index: -1; // 或者更多或者您想将任何对象设置到另一个对象的前面？你只需要设置 z-index: 1; //或更多

查看代码片段以获取更多信息：

.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>

Answer 2

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

z-index 并不像 "higher always means on top" 那样简单。元素被分组到不同的堆叠上下文中；较低层叠上下文中的元素不可能出现在较高层叠上下文中的元素之上。因此，根据 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>

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

Modal Dialog is obscured by opaque background

element-ui