js遮罩实现

遮罩的实现方法

在JavaScript中实现遮罩效果通常涉及创建一个半透明的覆盖层，覆盖在页面内容之上。以下是几种常见的实现方式：

使用纯CSS和HTML

通过简单的HTML和CSS即可实现基本遮罩效果：

<div class="mask"></div>
<div class="content">页面内容</div>

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    display: none;
}

// 显示遮罩
document.querySelector('.mask').style.display = 'block';
// 隐藏遮罩
document.querySelector('.mask').style.display = 'none';

动态创建遮罩元素

使用JavaScript动态创建遮罩元素：

function createMask() {
    const mask = document.createElement('div');
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100%';
    mask.style.height = '100%';
    mask.style.backgroundColor = 'rgba(0,0,0,0.5)';
    mask.style.zIndex = '1000';
    document.body.appendChild(mask);
    return mask;
}

// 使用遮罩
const mask = createMask();
// 移除遮罩
mask.remove();

结合模态框使用

遮罩常与模态框配合使用：

function showModal() {
    const mask = document.createElement('div');
    mask.className = 'mask';

    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = '<h3>提示</h3><p>这是一个模态框</p>';

    document.body.appendChild(mask);
    document.body.appendChild(modal);

    mask.addEventListener('click', () => {
        mask.remove();
        modal.remove();
    });
}

使用CSS动画增强效果

为遮罩添加淡入淡出效果：

.mask {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mask.show {
    opacity: 1;
}

const mask = document.querySelector('.mask');
mask.classList.add('show'); // 显示
mask.classList.remove('show'); // 隐藏

注意事项

• 遮罩的z-index值应足够高，确保覆盖其他元素
• 移动端需要考虑视口大小和滚动行为
• 遮罩显示时通常需要禁止页面滚动
• 遮罩点击事件可能需要阻止冒泡

以上方法可以根据具体需求进行调整和组合，实现不同场景下的遮罩效果。