当前位置：首页 > jquery

jquery遮罩层

2026-03-16 11:37:12jquery

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:1000;"></div>

// 显示遮罩
$('#mask').fadeIn();
// 隐藏遮罩
$('#mask').fadeOut();

带内容的遮罩层

在遮罩层中嵌入内容区域：

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:1000;">
  <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:20px;">
    这是弹窗内容
    <button id="closeBtn">关闭</button>
  </div>
</div>

$('#closeBtn').click(function(){
  $('#mask').fadeOut();
});

AJAX 加载遮罩

在异步请求时显示加载提示：

$(document).ajaxStart(function(){
  $('#mask').html('<div style="color:#fff; text-align:center; padding-top:20%">加载中...</div>').fadeIn();
});

$(document).ajaxComplete(function(){
  $('#mask').fadeOut();
});

注意事项

z-index 值要确保高于页面其他元素
移动端需要考虑 viewport 和 touch 事件
遮罩层出现时通常需要禁用页面滚动
可以使用 CSS 动画增强视觉效果

优化建议

将样式移至 CSS 文件而非行内样式：

#mask {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #fff;
  padding: 20px;
}