本文介绍: 弹出eldialog弹窗额外出现一个遮罩层在整个页面最顶上,任意点击一处地方后才是正常的遮罩层和弹框可以采取一下方法:1.避免盒子absolutefixedfloat等脱离文档流的布局删除或其他布局替代。2.如果是eldialog里又嵌套一层eldialog弹框,一定要把内层dialog加上appendtobody=”true“,插入body 元素,保证层级的正确(elementUI的组件内有更多解释)

小白今天代码发现一个问题弹出eldialog弹窗时额外会出现一个遮罩层在整个页面最顶上,任意点击一处地方后才是正常的遮罩层和弹框,找遍所有功能点也没找到原因后来听说用absolute绝对定位也会出现这样的问题,我一看自己的代码,原来是给最外面的div定位fixed了,无论是绝对定位还是固定定位,都会使元素脱离文档流,删掉换个布局实现就好了。

遇到类似问题可以试试以下方法

1.避免盒子absolute、fixedfloat等脱离文档流的布局删除或其他布局替代(包括父元素或他的爷爷、曾祖父等)

2.如果是eldialog里又嵌套一层eldialog弹框,一定要把内层dialog加上appendtobody=”true“,插入body 元素,保证层级的正确(elementUI的组件内有更多解释)

 

小白注释fixed以后就恢复正常啦,如图

 

前端小白第一次博客,不足地方还望在评论区指出讨论~

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注