Question

我正在使用元素的通知组件，但是当它被激活时，会出现对话框，但似乎是＆＃34;背后＆＃34;灰色的背景也是介绍的。单击任意位置可删除灰色背景并允许与对话框进行交互，但不会显示应该过滤掉正常屏幕噪声的灰色背景。这是一个显示各种状态的简短视频：

将组件放入的代码如下：

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

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

请注意，对话框的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开发工具进行检查时，我发现隐藏模式不会与对话框在同一个位置呈现;事实上，它附加在身体上，即在应用程序的外部范围内，这似乎是它们不在同一堆叠环境中的原因。有一个快速解决方案; dialog元素有一个属性“modalAppendToBody”。如果为true，则模态将呈现给正文，如果为false，则呈现给对话框的父元素。通过将此指定为false，我设法解决了问题：

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

Answer 2

您可以使用名为z-index

的CSS属性

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

查看Snipet了解更多信息：

＆＃13;

.a {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}
.b {
    margin-top:150px;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
}

＆＃13;

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

＆＃13;

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

2 个答案: