問題描述

問題分析

1）若dialog彈出框，它的遮罩層就會被插入到body標簽下（即與組件所在的最外層div同一層級）

Element UI中設置了modal-append-to-body='true'（默認）屬性

2）dialog的顯示層和遮罩層都設置了position:fixed，當然顯示層的z-index肯定要比遮罩層的大，才能正常的顯示彈出框。

問題就出在此處，若dialog的父級也設置了position:fixed，并且其z-index比彈出框的遮罩層的小（遮罩層處于更高一層），那么彈出框的內容就會被遮罩層所遮擋住了

3）dialog的父級元素確實設置了position:fixed，并且其z-index比彈出框的遮罩層的小，所以就會出現遮罩層把內容擋住的問題

解決方案

1）針對Element UI

Element UI該組件已經在屬性層面提供了解決辦法

給el-dialog設置modal-append-to-body="false"，使遮罩層插入至 Dialog 的父元素上

2）給position:fixed的父元素設置一個z-index，并且要比遮蓋層的大

3）dialog父元素不使用fixed定位

4) 添加全局CSS屬性

.modal-backdrop {z-index: -1; }

參考文章

https://blog.csdn.net/weixin_42614080/article/details/98957018

https://blog.csdn.net/java_augur/article/details/80345181

https://blog.csdn.net/lx_1024/article/details/80365689

https://blog.csdn.net/oschina_41012066/article/details/78982969

https://segmentfault.com/q/1010000010858722

總結

以上是生活随笔為你收集整理的Vue + Bootstrap|Element UI——模态框被遮罩层遮盖问题解决方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。