当前位置：首页 > jquery

jquery 遮罩层

2026-02-03 14:44:17jquery

jQuery 遮罩层实现方法

使用 jQuery 实现遮罩层可以增强用户体验，通常用于模态框、加载提示或阻止用户操作。以下是几种常见实现方式：

固定全屏遮罩层

// 创建遮罩层
$('body').append('<div id="mask" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9998;display:none;"></div>');

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

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

带内容的模态遮罩

// 创建遮罩和内容容器
$('body').append(`
  <div id="mask" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9998;display:none;">
    <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;z-index:9999;">
      这里是内容
      <button id="closeBtn">关闭</button>
    </div>
  </div>
`);

// 显示和隐藏控制
$('#showModal').click(function() {
  $('#mask').fadeIn();
});

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

页面加载遮罩

$(document).ready(function() {
  $('body').append('<div id="loadingMask" style="position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.8);z-index:9999;text-align:center;padding-top:20%;"><img src="loading.gif" alt="加载中..."></div>');

  $(window).on('load', function() {
    $('#loadingMask').fadeOut();
  });
});

进阶功能实现

禁止滚动穿透

// 显示遮罩时锁定滚动
$('#mask').fadeIn();
$('body').css('overflow', 'hidden');

// 隐藏遮罩时恢复滚动
$('#mask').fadeOut();
$('body').css('overflow', 'auto');

ESC键关闭遮罩

$(document).keyup(function(e) {
  if (e.keyCode === 27 && $('#mask').is(':visible')) {
    $('#mask').fadeOut();
  }
});

点击遮罩层外区域关闭

$('#mask').click(function(e) {
  if (e.target === this) {
    $(this).fadeOut();
  }
});

CSS优化建议

将样式提取到CSS文件中更易于维护：

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

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 20px;
  z-index: 9999;
}