jquery 遮罩层
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();注意事项
- 遮罩层的 z-index 值应高于页面其他元素但低于弹出内容
- 移动端需要考虑 viewport 适配问题
- 频繁显示/隐藏时建议对元素进行缓存
- 透明效果建议使用 rgba() 而非 opacity 属性
以上方法可根据实际需求组合使用，建议通过 CSS 控制样式而非直接写在 HTML 中以便维护。
