js实现遮罩层
实现遮罩层的基本方法
在JavaScript中实现遮罩层通常涉及创建一个覆盖整个页面的半透明层，用于阻止用户与底层内容交互。以下是常见的实现方式：
HTML结构部分：
<div id="mask" class="mask"></div>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;
}通过JavaScript控制遮罩层
显示遮罩层的JavaScript代码：
document.getElementById('mask').style.display = 'block';隐藏遮罩层的JavaScript代码：
document.getElementById('mask').style.display = 'none';增强型遮罩层实现
更完整的实现可能包括点击遮罩层关闭的功能：
const mask = document.getElementById('mask');
mask.addEventListener('click', function() {
this.style.display = 'none';
});
// 显示函数
function showMask() {
mask.style.display = 'block';
}动态创建遮罩层
也可以完全通过JavaScript动态创建遮罩层：
function createMask() {
const mask = document.createElement('div');
mask.id = 'dynamic-mask';
mask.className = 'mask';
document.body.appendChild(mask);
return mask;
}
// 使用示例
const myMask = createMask();
myMask.style.display = 'block';遮罩层与模态框配合使用
通常遮罩层会与模态框一起使用：
function showModal() {
const mask = document.getElementById('mask');
const modal = document.getElementById('modal');
mask.style.display = 'block';
modal.style.display = 'block';
mask.onclick = function() {
mask.style.display = 'none';
modal.style.display = 'none';
};
}考虑浏览器兼容性
对于较老版本的IE浏览器，可能需要使用滤镜实现半透明效果：
.mask {
background: #000;
filter: alpha(opacity=50);
opacity: 0.5;
}性能优化建议
频繁显示/隐藏遮罩层时，可以考虑预先创建好元素而不是动态生成。对于单页面应用，可以将遮罩层作为全局组件管理。
