当前位置：首页 > jquery

jquery遮罩层

2026-02-03 15:27:25jquery

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, #dialog').fadeIn();
// 隐藏遮罩和弹窗
$('#mask, #dialog').fadeOut();
</script>

动态创建遮罩层

function showMask() {
    $('<div>')
        .attr('id', 'mask')
        .css({
            'position': 'fixed',
            'top': 0,
            'left': 0,
            'width': '100%',
            'height': '100%',
            'background-color': 'rgba(0,0,0,0.5)',
            'z-index': 9999
        })
        .appendTo('body');
}

function hideMask() {
    $('#mask').remove();
}

点击遮罩层关闭功能

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

高级遮罩层实现

function createMask(options) {
    var settings = $.extend({
        opacity: 0.5,
        color: '#000',
        zIndex: 9998,
        clickClose: true,
        target: null
    }, options);

    var $mask = $('<div>').css({
        'position': 'fixed',
        'top': 0,
        'left': 0,
        'width': '100%',
        'height': '100%',
        'background-color': settings.color,
        'opacity': settings.opacity,
        'z-index': settings.zIndex,
        'display': 'none'
    }).appendTo('body');

    if(settings.clickClose) {
        $mask.on('click', function() {
            $mask.fadeOut();
            if(settings.target) $(settings.target).fadeOut();
        });
    }

    return {
        show: function() { $mask.fadeIn(); },
        hide: function() { $mask.fadeOut(); }
    };
}