#### 1. 問題描述 --- 彈出層使用的是 uView 2.x 的 [u-popup 組件](https://www.uviewui.com/components/popup.html),提示框使用的 uniapp 的 [uni.showToast()](https://uniapp.dcloud.net.cn/api/ui/prompt.html#showtoast) 彈出層中有表單元素,當表單中的輸入框未全部填寫時,點擊保存給個消息提示框告訴用戶必須填寫完整 下圖是想要實現(xiàn)的效果,但實際效果卻是看不到消息提示,通過控制臺查看元素發(fā)現(xiàn)是因為彈出層的優(yōu)先級比消息提示框高 ![](https://img.itqaq.com/art/content/ca9d7fd8ecbacecfa1756859b35e050b.png) #### 2. 分析問題 --- 通過查看 uView 文檔可知: 可以通過修改 u-popup 組件的 zIndex 屬性修改 彈出層的 z-index 值 ![](https://img.itqaq.com/art/content/fda876356db8205439ac65ea5a372c85.png) 通過控制臺查看元素可發(fā)現(xiàn) uni.showToast() 的 z-index 為 999 到此為止,得出結(jié)論: 只要有個居中模塊的定位 z-index 超過 999 就不會顯示 uni.showToast()。解決方案就是降低居中模塊的 z-index 值,使其小于 999 ![](https://img.itqaq.com/art/content/c3572cdf808c3dfcdb2c8b5b7e86ebdf.png) #### 3. 解決問題 --- 修改彈出層的 z-index 值 ``` <u-popup zIndex="998"></u-popup> ``` 修改彈出層遮罩的 z-index 值 ```css // 處理 u-popup 組件層級過高,將 uni.showToast 覆蓋問題 /deep/ .u-transition.u-fade-enter-to.u-fade-enter-active { z-index: 997 !important; } ```