当前位置：首页 > jquery

jquery 遮罩层

2026-04-08 07:51:35jquery

jQuery 遮罩层实现方法

使用 jQuery 实现遮罩层通常涉及创建一个覆盖全屏的半透明层，配合模态框或加载动画使用。以下是几种常见实现方式：

基础遮罩层实现

<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:9998;"></div>
<div id="dialog" style="display:none; position:fixed; z-index:9999;">内容区域</div>

<script>
// 显示遮罩
$('#mask').fadeIn();
$('#dialog').fadeIn();

// 隐藏遮罩
$('#mask').fadeOut();
$('#dialog').fadeOut();
</script>

带关闭功能的遮罩层

$(document).on('click', '#mask', function(){
    $(this).fadeOut();
    $('#dialog').fadeOut();
});

高级遮罩层特性

锁定页面滚动

function showMask(){
    $('body').css('overflow', 'hidden');
    $('#mask').show();
}

function hideMask(){
    $('body').css('overflow', 'auto');
    $('#mask').hide();
}

带加载动画的遮罩

<div id="loading-mask" style="background:rgba(255,255,255,0.8);">
    <div class="spinner">加载中...</div>
</div>

<style>
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

使用插件简化实现

jQuery BlockUI 插件

$.blockUI({ 
    message: '<h1>处理中...</h1>',
    css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } 
});

// 解除遮罩
$.unblockUI();

注意事项

jquery 遮罩层