遮罩的簡單實現

      遮罩在網頁應用中是很常見的一種功能，很多剛接觸的朋友都不知道怎麼實現：這裡給出一個簡單的demo，希望可以幫助到大家。

     原始碼：下載1   下載2；

     實現思路：就是在頁面放置一個z-index很高的div。（div中不要放置任何東西），通過js，來動態的設定div的高度和寬度。然後再通過css給div設定背景色，透明度等；下面是關鍵程式碼：

    在頁面加入：

<div id="overlay"></div>

     css程式碼：

/* 半透明的遮罩層 */
#overlay {
	background: #000;
	filter: alpha(opacity=50); /* IE的透明度 */
	opacity: 0.5;  /* 透明度 */
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 100; /* 此處的圖層要大於頁面 */
	display:none;
}
 

 js程式碼（基於jquery）：

//點選按鈕彈出遮罩
$(function(){
	$("#btn1").click(function(){
		showOverlay();
	});
	 /* 顯示遮罩層 */
	function showOverlay() {
		$("#overlay").height(pageHeight());
		$("#overlay").width(pageWidth());
		// fadeTo第一個引數為速度，第二個為透明度
		// 多重方式控制透明度，保證相容性，但也帶來修改麻煩的問題
		$("#overlay").fadeTo(200, 0.5);
	}

	/* 隱藏覆蓋層 */
	function hideOverlay() {
		$("#overlay").fadeOut(200);
	}
	/* 當前頁面高度 */
	function bodyHeight() {
		return document.body.scrollHeight;
	}
	/* 當前頁面寬度 */
	function bodyWidth() {
		return document.body.scrollWidth;
	}
	/* 當前瀏覽器的寬度*/
	function pageHeight() {
		return window.screen.availHeight;
	}
	/* 當前瀏覽器的寬度*/
	function pageWidth() {
		return window.screen.availWidth;
	}
}