解决vue和
element UI中对话框的遮罩层消失,在el-dialog标签里添加:modal-append-to-body='false'错误分析
1)若el-dialog弹出框设置了modal-append-to-body='true'(默认)属性,它的遮罩层就会被插入到body标签下(即与组件所在的最外层div同一层级)
2)el-dialog的显示层和遮罩层都设置了position:fixed,当然显示层的z-index肯定要比遮罩层的大,才能正常的显示弹出框。问题就出在此处,若el-dialog的父级也设置了position:fixed,并且其z-index比弹出框的遮罩层的小(遮罩层处于更高一层),那么弹出框的内容就会被遮罩层所遮挡住了
3)el-dialog的父级元素确实设置了position:fixed,并且其z-index比弹出框的遮罩层的小,所以就会出现遮罩层把内容挡住的问题解决办法
1)给el-dialog设置modal-append-to-body=“false”,使遮罩层插入至 Dialog 的父元素上
2)给position:fixed的父元素设置一个z-index,并且要比遮盖层的大
3)el-dialog父元素不使用fixed定位
版权声明:本文为weixin_42614080原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。