当前位置：首页 > JavaScript

js实现遮罩效果

2026-03-01 05:02:06JavaScript

实现遮罩效果的几种方法

使用CSS和JavaScript结合实现遮罩效果，以下是常见的几种实现方式：

固定定位全屏遮罩 通过创建一个覆盖整个屏幕的div元素，设置半透明背景和较高的z-index值：

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

动态显示/隐藏遮罩 通过添加/移除类名控制遮罩的显示状态：

js实现遮罩效果

const overlay = document.getElementById('overlay');
function toggleOverlay(show) {
    overlay.classList.toggle('active', show);
}
// CSS部分
.overlay {
    display: none;
    position: fixed;
    /* 其他样式同上 */
}
.overlay.active {
    display: block;
}

带内容的模态框遮罩 在遮罩层上添加内容区域并居中显示：

const modal = document.createElement('div');
modal.innerHTML = `
    <div class="modal-content">
        <p>Modal content here</p>
        <button class="close-btn">Close</button>
    </div>
`;
modal.style.position = 'fixed';
/* 其他遮罩样式 */
modal.querySelector('.close-btn').addEventListener('click', () => {
    document.body.removeChild(modal);
});
document.body.appendChild(modal);

动画效果的遮罩 使用CSS transition添加淡入淡出效果：

js实现遮罩效果

const overlay = document.createElement('div');
overlay.style.transition = 'opacity 0.3s ease';
overlay.style.opacity = '0';
document.body.appendChild(overlay);
// 显示
setTimeout(() => overlay.style.opacity = '1', 10);
// 隐藏
overlay.style.opacity = '0';
setTimeout(() => document.body.removeChild(overlay), 300);

响应式遮罩 确保遮罩在各种屏幕尺寸下正常工作：

window.addEventListener('resize', () => {
    overlay.style.width = `${window.innerWidth}px`;
    overlay.style.height = `${window.innerHeight}px`;
});

注意事项：