当前位置：首页 > jquery

jquery遮罩

2026-03-02 18:01:37jquery

jQuery遮罩的实现方法

使用jQuery实现遮罩效果通常涉及创建一个半透明的覆盖层，覆盖在页面或特定元素上，阻止用户与底层内容交互。以下是几种常见方法：

方法1：基础遮罩层

通过动态创建div元素并设置样式实现遮罩效果：

jquery遮罩

// 创建遮罩层
var mask = $('<div class="mask"></div>').css({
    'position': 'fixed',
    'top': 0,
    'left': 0,
    'width': '100%',
    'height': '100%',
    'background': 'rgba(0,0,0,0.5)',
    'z-index': 9999,
    'display': 'none'
}).appendTo('body');

// 显示遮罩
$('#showMask').click(function() {
    mask.fadeIn();
});

// 隐藏遮罩
$('#hideMask').click(function() {
    mask.fadeOut();
});

方法2：模态框结合遮罩

实现模态弹出框时常用遮罩层：

jquery遮罩

$('.open-modal').click(function() {
    // 创建遮罩
    $('<div class="modal-mask"></div>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        background: 'rgba(0,0,0,0.7)',
        'z-index': 1000
    }).appendTo('body');

    // 创建模态框
    $('<div class="modal-content">内容区域</div>').css({
        position: 'fixed',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        background: '#fff',
        padding: '20px',
        'z-index': 1001
    }).appendTo('body');
});

$('body').on('click', '.modal-mask', function() {
    $('.modal-mask, .modal-content').remove();
});

方法3：使用CSS类控制

预定义CSS样式，通过jQuery切换类名：

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

$('#toggleMask').click(function() {
    $('.mask').toggle();
});

方法4：全屏加载遮罩

实现页面加载时的全屏遮罩：

function showLoadingMask() {
    $('<div class="loading-mask">加载中...</div>').css({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        background: 'rgba(255,255,255,0.8)',
        'z-index': 9999,
        display: 'flex',
        'align-items': 'center',
        'justify-content': 'center',
        'font-size': '24px'
    }).appendTo('body');
}

// 隐藏加载遮罩
function hideLoadingMask() {
    $('.loading-mask').remove();
}