js形成页面的一种遮罩效果实例代码

// HTML结构示例，通常你需要一个元素来作为遮罩层
// <div id="mask" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000;"></div>

// JavaScript 遮罩层显示
function showMask() {
    var mask = document.getElementById('mask');
    if (mask) {
        mask.style.display = 'block'; // 显示遮罩层
    }
}

// JavaScript 遮罩层隐藏
function hideMask() {
    var mask = document.getElementById('mask');
    if (mask) {
        mask.style.display = 'none'; // 隐藏遮罩层
    }
}

// 示例：点击按钮显示遮罩层
document.getElementById('showBtn').addEventListener('click', showMask);

// 示例：点击遮罩层外的某个元素（如关闭按钮）隐藏遮罩层
document.getElementById('closeBtn').addEventListener('click', hideMask);

// 注意：上述代码中的'showBtn'和'closeBtn'是示例ID，你需要根据实际情况替换为页面中存在的元素ID。

这段代码展示了如何使用JavaScript和简单的HTML来创建和显示/隐藏一个页面遮罩效果。遮罩层通常用于在页面上覆盖一层半透明的背景，以阻止用户与页面其他部分的交互，直到用户执行了某个操作（如点击关闭按钮）来移除遮罩层。在实际应用中，你可能还需要在遮罩层上添加一些内容（如加载提示、表单等），这可以通过在遮罩层的HTML元素内部添加更多子元素来实现。