js实现遮罩层
使用CSS和JavaScript创建遮罩层
遮罩层通常用于模态框、加载动画或阻止用户与页面其他部分交互的场景。以下是实现遮罩层的几种方法：
基础HTML结构
<div id="mask" class="mask"></div>
<button id="showMask">显示遮罩</button>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控制显示/隐藏
const mask = document.getElementById('mask');
const showBtn = document.getElementById('showMask');
showBtn.addEventListener('click', () => {
mask.style.display = 'block';
});
// 点击遮罩层关闭
mask.addEventListener('click', () => {
mask.style.display = 'none';
});带内容的模态遮罩层
HTML结构
<div id="mask" class="mask">
<div class="modal-content">
<h3>模态框标题</h3>
<p>这里是模态框内容...</p>
<button id="closeModal">关闭</button>
</div>
</div>CSS样式
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
z-index: 1001;
border-radius: 5px;
}JavaScript控制
const closeBtn = document.getElementById('closeModal');
closeBtn.addEventListener('click', () => {
mask.style.display = 'none';
});高级遮罩层实现
禁止滚动
function showMask() {
document.body.style.overflow = 'hidden';
mask.style.display = 'block';
}
function hideMask() {
document.body.style.overflow = '';
mask.style.display = 'none';
}动画效果
.mask {
opacity: 0;
transition: opacity 0.3s ease;
}
.mask.show {
opacity: 1;
}// 显示时添加show类
mask.classList.add('show');
// 隐藏时移除show类
mask.classList.remove('show');使用第三方库实现
对于更复杂的需求，可以考虑使用以下库：
- jQuery UI Dialog
- Bootstrap Modal
- SweetAlert2
- Fancybox
这些库提供了更丰富的功能和更好的浏览器兼容性。
