jquery 遮罩

jQuery 遮罩实现方法

使用 jQuery 实现遮罩效果通常涉及创建一个半透明的覆盖层，覆盖在页面或特定元素上方，常用于模态框、加载提示等场景。

基本遮罩实现

HTML 结构：

<div class="mask"></div>

CSS 样式：

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

jQuery 控制：

// 显示遮罩
$('.mask').fadeIn();

// 隐藏遮罩
$('.mask').fadeOut();

结合模态框使用

HTML 结构：

<div class="mask"></div>
<div class="modal">
    <div class="modal-content">内容区域</div>
    <button class="close">关闭</button>
</div>

CSS 样式：

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1001;
    display: none;
}

jQuery 控制：

$('.show-modal').click(function() {
    $('.mask').fadeIn();
    $('.modal').fadeIn();
});

$('.close').click(function() {
    $('.mask').fadeOut();
    $('.modal').fadeOut();
});

高级用法：点击遮罩关闭

$('.mask').click(function(e) {
    if ($(e.target).hasClass('mask')) {
        $('.mask').fadeOut();
        $('.modal').fadeOut();
    }
});

动画效果增强

$('.mask').fadeTo(200, 0.5);
$('.modal').fadeTo(200, 1).css('top', '50%');

注意事项

• z-index 值需要合理设置，确保遮罩在内容之下但在其他元素之上
• 考虑页面滚动条的处理，防止背景内容滚动
• 移动端可能需要额外的视口处理
• 性能优化：避免频繁操作 DOM，可以预创建遮罩元素

这些方法可以根据具体需求组合使用，实现各种遮罩效果。实际应用中可能需要根据项目具体情况调整样式和交互逻辑。