jquery遮罩

jQuery遮罩的实现方法

使用jQuery实现遮罩效果通常涉及创建一个半透明的覆盖层，覆盖整个页面或特定元素。以下是几种常见实现方式：

基础遮罩实现

创建全屏遮罩层：

// 添加遮罩层
$('body').append('<div class="mask"></div>');

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

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

针对特定元素的遮罩

为特定容器添加遮罩：

$('.target-element').append('<div class="mask"></div>');

// CSS样式
.target-element {
  position: relative;
}
.target-element .mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.3);
}

带加载动画的遮罩

结合加载动画效果：

$('body').append(`
  <div class="mask">
    <div class="loading-spinner"></div>
  </div>
`);

// CSS样式
.loading-spinner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

高级遮罩控制

实现点击遮罩关闭功能：

$('body').append('<div class="mask" id="page-mask"></div>');

$('#page-mask').click(function() {
  $(this).fadeOut();
});

// 防止事件冒泡
$('.modal-content').click(function(e) {
  e.stopPropagation();
});

响应式遮罩插件

使用现成的jQuery插件如blockUI：

// 引入blockUI插件后
$.blockUI({ 
  message: '<h1>Loading...</h1>',
  css: { 
    border: 'none', 
    padding: '15px', 
    backgroundColor: '#000', 
    color: '#fff',
    opacity: .6 
  } 
});

// 解除遮罩
$.unblockUI();

这些方法可以根据具体需求进行调整，如修改透明度、颜色、动画效果等。对于复杂场景，推荐使用专门的遮罩插件如blockUI或loadingOverlay，它们提供了更多配置选项和更好的浏览器兼容性。