-
解决vue和
element UI
中对话框的遮罩层消失,在el-dialog
标签里添加:modal-append-to-body='false'
-
错误分析
1)若el-dialo
g弹出框设置了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
定位
解决vue和element UI中对话框的遮罩层消失
最新推荐文章于 2024-05-29 19:59:59 发布