jquery 遮罩

jQuery 遮罩实现方法

jQuery 遮罩常用于在页面上创建半透明覆盖层，通常用于模态对话框、加载提示或阻止用户交互。以下是几种常见的实现方式：

基础遮罩实现

// 创建遮罩元素
var mask = $('<div class="mask"></div>').css({
  'position': 'fixed',
  'top': 0,
  'left': 0,
  'width': '100%',
  'height': '100%',
  'background-color': 'rgba(0,0,0,0.5)',
  'z-index': 1000,
  'display': 'none'
}).appendTo('body');

// 显示遮罩
$('.show-mask').click(function() {
  mask.fadeIn();
});

// 隐藏遮罩
$('.hide-mask').click(function() {
  mask.fadeOut();
});

带关闭功能的遮罩

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

配合模态框使用

$('.open-modal').click(function() {
  $('.mask').fadeIn();
  $('.modal').fadeIn().css({
    'position': 'fixed',
    'z-index': 1001,
    'top': '50%',
    'left': '50%',
    'transform': 'translate(-50%, -50%)'
  });
});

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

优化建议

CSS 预定义样式 将遮罩样式放在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;
}

性能优化 避免频繁操作DOM，可以在页面加载时就创建好遮罩元素。

响应式考虑 确保遮罩在各种设备上都能正常显示，特别是在移动设备上。

动画效果 使用CSS3动画替代jQuery动画可以获得更好的性能：

.mask {
  transition: opacity 0.3s ease;
}
.mask.fade-out {
  opacity: 0;
}
.mask.fade-in {
  opacity: 1;
}

常见问题解决

遮罩无法覆盖全屏 检查是否有父元素设置了overflow或position属性，确保遮罩的position是fixed。

遮罩层叠顺序问题 通过调整z-index值确保遮罩位于正确层级。

IE兼容性问题 对于旧版IE，可以使用滤镜实现半透明效果：

.mask {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
  zoom: 1;
}