【效果圖】
總而言之，就是當某一事件被觸發時,例如 按鈕點擊事件 。使一個事先定義好的div 顯示， 并用Css控制位置，其中的z-index屬性必須有，
值賦的越大，說明此div層在重疊時，在最上面。
其中要注意的地方：
【遮罩層的大小】
1、用JS判斷你的顯示器分辨率，獲取長與寬兩個參數，將這兩個參數賦給第二層的Div，作為他的長與寬的像素值，這樣的話，無論在多大或多小的顯示器上，都可以顯示同樣的效果
2、CSS樣式表：這種方法，只能提前設置好遮罩層的長與寬了，但是就會出現一些問題：如果你的遮罩層設置的寬度、長度很大，那么在小顯示器上就會出現瀏覽器的滾動條～～反之則會出現遮罩不上的問題
因為做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復制代碼
學習交流
熱門圖片
猜你喜歡的新聞
新聞熱點
疑難解答
