如圖：

image

解決辦法

在el-dialog標簽里添加 :modal-append-to-body='false'

image

實現(xiàn)效果：

image

問題解析

先來看看element-ui官網(wǎng)提供的屬性說明文檔

image

文檔解釋：翻譯成大白話就是，若el-dialog彈出框設(shè)置了modal-append-to-body='true'（默認）屬性，它的遮罩層就會被插入到body標簽下（即與組件所在的最外層div同一層級），知道這個原理就好辦了。

問題分析：經(jīng)過分析源代碼可得，el-dialog的顯示層和遮罩層都設(shè)置了position:fixed，當(dāng)然顯示層的z-index肯定要比遮罩層的大，才能正常的顯示彈出框。問題就出在此處，若el-dialog的父級也設(shè)置了position:fixed，并且其z-index比彈出框的遮罩層的?。ㄕ谡謱犹幱诟咭粚樱?，那么彈出框的內(nèi)容就會被遮罩層所遮擋住了。

經(jīng)過分析出問題的代碼可得出，el-dialog的父級元素確實設(shè)置了position:fixed，并且其z-index比彈出框的遮罩層的小，所以就會出現(xiàn)遮罩層把內(nèi)容擋住的問題。

解決方案

1、給el-dialog設(shè)置modal-append-to-body=“false”，使遮罩層插入至 Dialog 的父元素上。（推薦）

2、給position:fixed的父元素設(shè)置一個z-index，并且要比遮蓋層的大。

3、el-dialog父元素不使用fixed定位。

為了驗證這個問題，我特地寫了個demo，如下圖：

圖一：modal-append-to-body=“true”

image

圖二：modal-append-to-body=“false”

image

(完)