創建自定義遮罩層的實現方法-純JS控制遮罩層樣式

一、什麼是遮罩層

遮罩層是我們在網頁中常見的一種效果，它可以把一個div或者是整個頁面遮蓋住，以達到彈出框、提示等效果。一般來說，遮罩層是全屏大小的半透明層，上面包含了目標內容。

在前端開發中，我們通常使用CSS屬性來控制遮罩層的樣式。但是本文將闡述通過純JS來自定義遮罩層的實現方法，主要包括以下幾個方面：

二、創建/刪除遮罩層

定義一個函數，通過JS動態在頁面中創建遮罩層，並且可以在不需要時把它刪除掉。

/**
 * 創建遮罩層
 */
function createMask(){
    var mask = document.createElement('div');
    mask.setAttribute('class', 'mask');
    document.body.appendChild(mask);
}

/**
 * 刪除遮罩層
 */
function removeMask(){
    var mask = document.querySelector('.mask');
    mask.parentNode.removeChild(mask);
}

上面的代碼中，我們定義了兩個函數，創建遮罩層的函數 createMask 和刪除遮罩層的函數 removeMask。在這兩個函數中，我們通過JS動態創建/刪除一個 div，加上特定的樣式，這就是我們的遮罩層。

三、控制遮罩層的樣式

接下來，我們需要對遮罩層的樣式進行控制，這可以通過CSS屬性來實現。以下是一個基礎的遮罩層的CSS樣式：

.mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

在上面的代碼中，我們設置了遮罩層為 fixed 定位，z-index 為 1000，left、top、right、bottom 都為 0，這樣可以讓遮罩層充滿整個屏幕。其中 background-color 為半透明黑色。

通過JS，我們可以修改遮罩層的屬性來控制遮罩層的樣式。以下是一個修改遮罩層背景顏色的函數：

/**
 * 修改遮罩層背景顏色
 * @param {string} color - 背景顏色
 */
function changeMaskBgColor(color){
    var mask = document.querySelector('.mask');
    mask.style.backgroundColor = color;
}

在上面的代碼中，我們通過 document.querySelector 獲取到遮罩層元素，然後通過設置元素的 style 屬性來修改背景顏色。

四、遮罩層的實際應用

最後，我們來看一個實際應用遮罩層的例子。以下是一個簡單的登錄框，當點擊登錄按鈕時，會在頁面中創建一個遮罩層，並彈出登錄框；當點擊登錄框外的遮罩層或關閉按鈕時，會刪除該遮罩層。

/**
 * 打開登錄框
 */
function openLoginBox(){
    createMask(); // 創建遮罩層
    var loginBox = document.createElement('div');
    loginBox.setAttribute('class', 'login-box');
    loginBox.innerHTML = '<div class="login-content">登錄框內容</div><div class="close-btn">關閉</div>';
    document.body.appendChild(loginBox); // 將登錄框添加到body中

    // 點擊關閉按鈕或者遮罩層時，刪除遮罩層和登錄框
    var closeBtn = document.querySelector('.close-btn');
    closeBtn.onclick = removeMask;
    var mask = document.querySelector('.mask');
    mask.onclick = removeMask;
}

/**
 * 初始化函數
 */
(function(){
    var loginBtn = document.querySelector('.login-btn');
    loginBtn.onclick = openLoginBox;
}());

在上面的代碼中，我們創建了一個打開登錄框的函數 openLoginBox，在該函數中，我們先創建遮罩層，並在遮罩層上添加了登錄框的 HTML 內容。最後，我們通過設置登錄框的樣式和事件，使其在頁面中彈出。

五、小結

純JS控制遮罩層樣式的實現方法很簡單，我們只需要用JS來動態創建、刪除 div 元素，並通過CSS屬性、JS設置元素的 style 屬性來控制遮罩層的樣式。遮罩層是現代網頁設計中常用的一種元素，有了這個技巧，我們可以更加方便地自定義和控制遮罩層的樣式。