element ui 弹出组件的遮罩层在弹出层的上面

Question

lement ui 弹出组件的遮罩层在弹出层的上面

<el-button size="small" @click="dialogFormVisible = true">充值</el-button>

<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
    <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" auto-complete="off"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </div>
</el-dialog>

Answer 1

上面的答案里有使用 :modal-append-to-body="false" 的方法，但是有时候会存在页面某些元素没有被 modal 盖上的情况，其实这种情况出现的原因就是你的dialog 是放在当前组件中的，如果放body 下则不会有这些情况，所以在 el-dialog 上添加 :append-to-body="true" 具体可以看官方文档中的 attributes http://element-cn.eleme.io/#/...

Answer 2

<el-dialog title="收货地址" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
添加 :modal-append-to-body="false"

Answer 3

在el-dialog 加上 :modal="false"

Answer 4

修改下css就行了，让modal－dropback的z－index低于modal

Answer 5

去掉遮罩的方法：

<style>
    .v-modal {
        z-index: 0 !important;
    }
</style>

Answer 6

我刚刚也出现了同样的问题，原因是在祖父元素上添加了

webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);

不知道题主是什么原因导致的。。。

Answer 7

解决了吗？题主，我也碰到这个问题。遮罩层的z-index比对话框的z-index要高。不知怎么解决。modal设置成false，也取消不了遮罩哇

Answer 8

请问解决了吗？

Answer 9

在 el-dialog 标签里添加下面两行代码的任意一行：

 :modal-append-to-body='false'
     或
 :append-to-body='true'
 
 

主要是el-dialog 父元素 设置了 position属性