当前位置：首页 > JavaScript

js 实现遮罩

2026-02-02 07:30:56JavaScript

实现遮罩的基本方法

使用HTML和CSS创建遮罩层，通过JavaScript控制其显示和隐藏。遮罩层通常是一个半透明的div，覆盖在整个页面上方。

<div id="mask" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;"></div>

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

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

带内容的遮罩实现

遮罩层可以包含其他内容，如加载提示或对话框。

<div id="mask" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;">
    <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:white; padding:20px;">
        加载中...
    </div>
</div>

点击遮罩关闭功能

为遮罩添加点击事件，点击后自动关闭。

document.getElementById('mask').addEventListener('click', function() {
    this.style.display = 'none';
});

使用CSS类管理样式

将样式移至CSS文件中，提高可维护性。

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

.mask-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
}

function toggleMask(show) {
    document.getElementById('mask').style.display = show ? 'block' : 'none';
}

动画效果增强

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

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

.mask.show {
    opacity: 1;
}

function showMask() {
    const mask = document.getElementById('mask');
    mask.classList.add('show');
    mask.style.display = 'block';
}

function hideMask() {
    const mask = document.getElementById('mask');
    mask.classList.remove('show');
    setTimeout(() => {
        mask.style.display = 'none';
    }, 300);
}

js 实现遮罩