隨著網頁設計的越來越多樣化，遮罩層的應用越來越廣泛。遮罩層可以用來實現彈出框、浮動框以及其他一些需要遮擋原來頁面內容的功能。本文將介紹如何使用CSS和JavaScript來實現遮罩層功能。

首先，我們需要為遮罩層添加一個固定的位置，并設置遮罩層的大小和背景顏色。以下是CSS代碼：

/* 遮罩層樣式 */
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999; /* 確保遮罩層在最上層 */
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
}

上面的代碼中，我們設置了遮罩層的定位方式為fixed，這樣無論頁面如何滾動，遮罩層始終會出現在視窗的最上層。同時，使用z-index屬性確保遮罩層在最上層，并使用rgba顏色值設置半透明的背景顏色。

接下來，我們需要使用JavaScript來控制遮罩層的顯示和隱藏。以下是JavaScript代碼：

// 顯示遮罩層
function showMask() {
var mask = document.createElement('div'); // 創建遮罩層
mask.className = 'mask'; // 添加樣式名
document.body.appendChild(mask); // 添加到頁面中
}
// 隱藏遮罩層
function hideMask() {
var mask = document.querySelector('.mask'); // 獲取遮罩層
document.body.removeChild(mask); // 從頁面中移除
}

上面的代碼中，我們通過創建一個新的div元素來生成遮罩層并添加到頁面中。通過添加和移除這個div元素，我們可以實現遮罩層的顯示和隱藏。

最后，我們可以在頁面中使用以下代碼來調用showMask和hideMask函數：

顯示遮罩層隱藏遮罩層

可以根據需要在按鈕或其他元素上綁定相應的事件來控制遮罩層的顯示和隱藏。