使用原生js實現頁面蒙灰(mask)效果示例代碼_javascript技巧

（增加蒙灰效果），那么用戶體驗會不是特別良好，用戶不知道現在是不是應該點擊別的程序，用戶并不知道是不是應該繼續等待網頁，還是可以點擊別的頁面。

現在就有一個比較良好的交互，就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法。在此作者希望自己也能夠

使用原生的js實現自己的蒙灰效果。故自己做了嘗試。實現了蒙灰效果。在此我只關注實現，頁面美觀程度我沒有太多調整，所以頁面不太美觀。在此貼出實現代碼。

在CODE上查看代碼片派生到我的代碼片

解釋一下代碼中比較重要的地方。

.maskStyle是蒙灰層的樣式

其中
在CODE上查看代碼片派生到我的代碼片

filter:alpha(opacity=50); 
opacity:0.8; 

是代表蒙灰層透明度，filter屬性是為了兼容IE8瀏覽器

z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

PS：蒙灰效果需要把要蒙灰到element放到div中才可以

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com