于是便想到了用div+Css的方法實(shí)現(xiàn)這一效果。

【效果圖】

總而言之，就是當(dāng)某一事件被觸發(fā)時(shí),例如 按鈕點(diǎn)擊事件 。使一個(gè)事先定義好的div 顯示， 并用Css控制位置，其中的z-index屬性必須有，

值賦的越大，說(shuō)明此div層在重疊時(shí)，在最上面。

其中要注意的地方：

【遮罩層的大小】
1、用JS判斷你的顯示器分辨率，獲取長(zhǎng)與寬兩個(gè)參數(shù)，將這兩個(gè)參數(shù)賦給第二層的Div，作為他的長(zhǎng)與寬的像素值，這樣的話，無(wú)論在多大或多小的顯示器上，都可以顯示同樣的效果

2、CSS樣式表：這種方法，只能提前設(shè)置好遮罩層的長(zhǎng)與寬了，但是就會(huì)出現(xiàn)一些問(wèn)題：如果你的遮罩層設(shè)置的寬度、長(zhǎng)度很大，那么在小顯示器上就會(huì)出現(xiàn)瀏覽器的滾動(dòng)條～～反之則會(huì)出現(xiàn)遮罩不上的問(wèn)題

因?yàn)樽鯤TML模型，所以我用的第二種方法，有個(gè)不太合理解決的方式：我把瀏覽器的下方（橫向的）滾動(dòng)條給禁用掉了。代碼是： 在CSS樣式表中寫入 html,body { overflow-x:hidden;}

【遮罩層樣式】
1、三個(gè)Div層的樣式，position都要設(shè)為absolute;，因?yàn)橹挥性O(shè)為absolute時(shí)， z-index：屬性才會(huì)生效！

2、半透明屬性：filter:alpha(opacity=50); IE專有屬性， 設(shè)置層的透明度為 50% ，
                            -moz-opacity:0.5;    火狐FF 專有屬性，設(shè)置層的透明度為 50%。
這兩條屬性都要加上，因?yàn)镮E、火狐對(duì)其中的單一一條并不兼容～～～
還有一點(diǎn)，你的遮罩層樣式中，一定要設(shè)置 width 與 height   ，否則 透明屬性不起效～～

3、 z-index： 的順序，   z-index：屬性的值越小，則該層越在下方，最小值是1
【代碼示例】

1 覆蓋div

• css
• div