Div+Css實現(xiàn)屏蔽效果

　　在做項目的過程中 用到了Yahoo 的YUI控件，其中的datatable 很方便，但是有些時候要把點擊table事件屏蔽，于是便想到了用div+Css的方法實現(xiàn)這一效果。

　　【效果圖】

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

　　值賦的越大，說明此div層在重疊時，在最上面。

　　其中要注意的地方：

　　【遮罩層的大小】

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

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

　　因為做HTML模型，所以我用的第二種方法，有個不太合理解決的方式：我把瀏覽器的下方(橫向的)滾動條給禁用掉了。代碼是： 在CSS樣式表中寫入 html,body { overflow-x:hidden;}

　　【遮罩層樣式】1、三個Div層的樣式，position都要設為absolute;，因為只有設為absolute時， z-index：屬性才會生效!

　　2、半透明屬性：filter:alpha(opacity=50); IE專有屬性， 設置層的透明度為 50% ，

　　-moz-opacity:0.5; 火狐FF 專有屬性，設置層的透明度為 50%。

　　這兩條屬性都要加上，因為IE、火狐對其中的單一一條并不兼容～～～

　　還有一點，你的遮罩層樣式中，一定要設置 width 與 height ，否則 透明屬性不起效～～

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

　　【代碼示例】

　　1 覆蓋div

　　2 事件調用