在Vue開發中出現對話框被遮罩層擋住問題的解決教程

Vue的開發中，一旦我們用到對話框，經常出現的問題是對話框被遮罩層擋住，無論是Element-UI dialog還是bootstrap的Modal，如下圖所示：

造成這個問題的原因是對話框組件的父元素的position有fixed或者relative值，比較簡單易行的辦法如下：對于bootstrap Modal需要添加css語句

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

而對于Element UI該組件已經在屬性層面提供了解決辦法，只要添加:modal-append-to-body="false"就可以了。

我們開發的時候，經常會遇得到一些網站，頭部和尾部一毛一樣，這樣頭部尾部相同的網站，怎么都不可能把頭部和尾部重新書寫一遍吧，不僅浪費時間還顯示的是自己的網站代碼重復率比較多，顯示自己沒有水平。下面長沙前端培訓班分享：iframe中的二級菜單被遮蓋怎么辦：

解決這個問題首先需要我們經常會把這樣重復的頭部和尾部都單獨提出來，制作成一個獨立的網頁，然后通過iframe框架進行引入。如果公共頭部中有對應的一級導航和二級菜單導航的胡被遮住這可怎么解決呢？

各種網站和各種公眾號上面方法使用了js，但是js比較麻煩，并且代碼粘貼下來使用的時候會出現問題，跑不起來，接下來由我提供給你們一個簡單快速高效的解決問題辦法。那叫一個so easy；并且關鍵代碼也給出了注釋喲，值得你來查看。問題代碼：

（一）公共頭部----帶有二級菜單

HTML源碼

<div class="box">這里是logo</div>

<ul>

<li>你好

<ul>

</ul>

</li>

<li>我好

<ul>

</ul>

</li>

<li>大家好

<ul>

</ul>

</li>

<li>勇哥

<ul>

</ul>

</li>

<li>真的

<ul>

</ul>

</li>

<li>很帥

<ul>

</ul>

</li>

<li>好帥啊

<ul>

</ul>

</li>

<li>太帥了

<ul>

</ul>

</li>

<li>真的哦

<ul>

</ul>

</li>

<li>結束了

<ul>

</ul>

</li>

</ul>

</div>

CSS源碼

<style>

*{margin:0;padding:0}

ul{list-style:none}

a{text-decoration: none;}

img{vertical-align: middle;}

.box{

width:1000px;

height:100px;

background-color: pink;

margin:0 auto;

font-size:50px;

font-weight: bold;

text-align: center;

line-height: 100px;

}

.layout{

height:60px;

background-color:cornflowerblue;

}

.layout>ul{

width: 1000px;

margin: 0 auto;

height:60px;

}

.layout>ul>li{

font-size:14px;

float: left;

width:100px;

text-align: center;

line-height: 60px;

border-right:1px dashed white;

box-sizing: border-box;

color:white

}

.layout>ul>li:last-child{

border-right:0px

}

.layout>ul>li>ul{

background-color: pink;

color:white;display: none;

}

.layout>ul>li:hover>ul{

display: block;

position: relative;

}

/* 取消滾動條 */

::-webkit-scrollbar{

display: none;

}

</style>

效果：

（二）公共主體----需要引入頭部

HTML源碼

我是獨立的頁面主體部分

</div>

CSS源碼

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

}

/*取消3像素間距*/

iframe{vertical-align: middle;}

/*取消滾動條*/

::-webkit-scrollbar{

display: none;

}

效果：

問題所在

描述：引入公共的頭部之后，二級菜單，被主體區域內容給遮蓋住了，使用js實現起來也是非常的困難的；

解決問題：描述如下

將在主體引入的頭部頁面中，引入的順序改變一下，放在主體的后面；放在主體后面的話加載順序就會出現問題，主體就會顯示在主體后面。那如何調整順序問題呢？使用固定定位，定位在引入頁面的最上面，但是定位后也會把布局遮蓋住，如何解決遮蓋主體的問題呢，就是需要給主體添加margin-top;來解決問題，這樣二級菜單就能顯示出來了

修改后的主體代碼：HTML

我是獨立的頁面主體部分

</div>

效果：加載順序

修改代碼：CSS

<style>

*{margin:0;padding:0}

.tip{

height:500px;

background-color: yellowgreen;

text-align: center;

line-height: 500px;

font-size:80px;

font-weight:bold;

/*修改的代碼*/

margin-top:160px

}

iframe{vertical-align: middle;}

::-webkit-scrollbar{

display: none;

}

/*修改的代碼*/

#one{

position:fixed;

top:0px;

width:100%;

height:500px;

}

</style>

效果：

以上就是：通過HTML和CSS來解決，iframe二級菜單被遮住的效果：關鍵代碼就是調整順序，和添加定位。

果在圖片上顯示文字，經常會遇到這個情況，就是當文字和背景顏色差不多時，文字會看不清楚，我們一般通過給文字加text shadow或者修改圖片的透明度來讓文字顯示更加突出。我們今天說一下透明度的問題，一般我們干這個活兒是通過photoshop來做，其實CSS本身也可以實現類似的效果。如何做？

咱們先從下面這個例子開始，有一張背景圖片，上面有些文字：

對應的顯示效果如下：

可以看到，文字顯示不是特別清晰，現在要給圖片增加一層控制透明度，我們使用偽元素實現：

可以看到，加入了一層，inset是top, bottom, left, right的簡寫形式，將它們都設為0。通過這個設置，顯示效果如下：

現在它把所有元素都蓋住了，而我們需要文字在這層的上面，如果加入z-index:-1, 則這個層又跑到所有元素下面，看不到了。

要解決這個問題，我們需要引入一個關鍵CSS，isolation: isolate; 通過它來創建一個新的CSS堆疊上下文，從而使得這個層不會跑到外面，具體關于isolation, 我專門寫過一個文章，這里可以直接查看詳細信息：使用isolation: isolate來創建堆疊上下文

可以看到，這個層現在位于文字和圖片中間，如下所示：

那現在就簡單了，可以更改opacity來控制其透明度，

最后將顏色改為黑色，就達到了我們所期望的效果。

附上完整的CSS：

感謝閱讀！

在線咨詢

上一篇：HTML+PHP超大視頻上傳實例
下一篇：HTML5大顯神通：8個3D視覺效果“讓你好看”

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在Vue開發中出現對話框被遮罩層擋住問題的解決教程

您的項目需求