当前位置：首页 > JavaScript

js 实现遮罩

2026-04-07 00:51:33JavaScript

使用 CSS 和 JavaScript 实现遮罩

通过动态创建遮罩层元素并控制其显示/隐藏，可以实现灵活的遮罩效果。以下是一个完整的实现示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: none;
        }
        .content {
            position: relative;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="content">
        <button id="showMask">显示遮罩</button>
        <button id="hideMask">隐藏遮罩</button>
    </div>

    <script>
        // 创建遮罩元素
        const mask = document.createElement('div');
        mask.className = 'mask';
        document.body.appendChild(mask);

        // 显示遮罩
        document.getElementById('showMask').addEventListener('click', function() {
            mask.style.display = 'block';
        });

        // 隐藏遮罩
        document.getElementById('hideMask').addEventListener('click', function() {
            mask.style.display = 'none';
        });

        // 点击遮罩层关闭
        mask.addEventListener('click', function() {
            this.style.display = 'none';
        });
    </script>
</body>
</html>

遮罩层添加内容

可以在遮罩层中放置其他内容，如加载提示或对话框：

js 实现遮罩

const mask = document.createElement('div');
mask.className = 'mask';
mask.innerHTML = `
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                background: white; padding: 20px; border-radius: 5px;">
        <p>加载中，请稍候...</p>
    </div>
`;
document.body.appendChild(mask);

使用 CSS 动画增强效果

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

js 实现遮罩

.mask {
    /* 其他样式同上 */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mask.show {
    opacity: 1;
    display: block;
}

// 显示遮罩
document.getElementById('showMask').addEventListener('click', function() {
    mask.classList.add('show');
});

// 隐藏遮罩
document.getElementById('hideMask').addEventListener('click', function() {
    mask.classList.remove('show');
    setTimeout(() => mask.style.display = 'none', 300);
});

响应式遮罩实现

确保遮罩在各种设备上都能正常工作：

@media (max-width: 768px) {
    .mask {
        background-color: rgba(0, 0, 0, 0.7);
    }
}

防止滚动穿透

当遮罩显示时禁止页面滚动：

function showMask() {
    mask.style.display = 'block';
    document.body.style.overflow = 'hidden';
}

function hideMask() {
    mask.style.display = 'none';
    document.body.style.overflow = '';
}

这些方法提供了完整的遮罩实现方案，可根据实际需求进行调整和扩展。

标签: js