jquery 遮罩层

使用 jQuery 创建遮罩层

遮罩层是一种常见的 UI 组件，用于在页面上覆盖一个半透明的层，通常用于模态框或加载提示。以下是实现方法：

HTML 结构

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

CSS 样式

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

jQuery 控制

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

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

带关闭功能的遮罩层

可以在遮罩层上添加关闭按钮或点击遮罩层关闭：

HTML 更新

<div id="mask" class="mask">
    <span class="close-btn">×</span>
</div>

jQuery 更新

// 点击关闭按钮关闭
$('.close-btn').click(function() {
    $('#mask').fadeOut();
});

// 点击遮罩层关闭
$('#mask').click(function(e) {
    if (e.target === this) {
        $(this).fadeOut();
    }
});

结合模态框使用

遮罩层常与模态框配合使用：

HTML 更新

<div id="mask" class="mask">
    <div class="modal">
        <h3>提示</h3>
        <p>这是模态框内容</p>
        <button class="close-modal">关闭</button>
    </div>
</div>

CSS 更新

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    padding: 20px;
    z-index: 1001;
}

jQuery 更新

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

高级选项

可以添加动画效果或限制滚动：

禁止滚动

$('body').css('overflow', 'hidden');
$('#mask').fadeIn();

// 恢复滚动
$('body').css('overflow', '');
$('#mask').fadeOut();

动画效果

$('#mask').fadeTo(300, 0.5);

以上方法提供了 jQuery 实现遮罩层的基本和进阶用法，可以根据实际需求进行调整。