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

这些库提供了更丰富的功能和更好的浏览器兼容性。