jquery 遮罩

jQuery 遮罩实现方法

使用 jQuery 实现遮罩效果通常涉及创建一个覆盖全屏的半透明层，并控制其显示与隐藏。以下是几种常见方法：

基础遮罩实现

HTML 结构需包含遮罩层和目标内容：

<div class="mask"></div>
<div class="content">需要展示的内容</div>

CSS 样式设置遮罩层的基本属性：

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

jQuery 控制显示与隐藏：

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

$('.hide-mask').click(function() {
    $('.mask').fadeOut();
});

模态框结合遮罩

创建模态弹出窗口时通常需要遮罩层：

$('.open-modal').click(function() {
    $('.mask').fadeIn();
    $('.modal').fadeIn().css('display', 'flex');
});

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

高级遮罩特性

添加动画效果提升用户体验：

$('.mask').fadeTo(200, 0.8);

阻止背景滚动：

$('body').css('overflow', 'hidden');
$('body').css('overflow', 'auto');

注意事项

• z-index 值需合理设置以确保遮罩层在正确层级
• 移动端需考虑 viewport 适配问题
• 性能优化：避免频繁操作 DOM，可考虑缓存 jQuery 对象

以上方法可根据实际需求组合使用，实现不同场景下的遮罩效果。