使用原生js实现页面蒙灰(mask)效果示例代码

下面是我的详细讲解。

1. 实现原理

页面蒙灰效果主要是通过在页面上添加一个灰色的半透明遮罩层，并且将遮罩层的z-index设置的高于其他元素，从而达到遮罩其他元素的效果。其主要实现步骤如下：

1. 创建遮罩层容器，并设置其样式，包括颜色，透明度等。
2. 插入遮罩层容器到文档中，且将其z-index属性的值设置得大于其他元素。
3. 在需要使用遮罩层的元素处调用显示遮罩层函数。
4. 在需要关闭遮罩层的元素或操作处调用关闭遮罩层函数。

2. 示例说明

示例 1

以下为原生js实现遮罩层的代码示例：

<div id="mask"></div>
<script>
    var mask = document.getElementById('mask');
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100%';
    mask.style.height = '100%';
    mask.style.background = 'rgba(0,0,0,0.5)';
    mask.style.zIndex = '999';
    mask.style.display = 'none';

    function showMask() {
        mask.style.display = 'block';
    }

    function hideMask() {
        mask.style.display = 'none';
    }
</script>

在这个示例中，我们首先创建了一个div元素，并且设置其id属性为‘mask’。接着在javascript代码中，我们找到这个元素，并设置其样式，包括颜色，透明度和z-index等。问题部分的显示和隐藏遮罩层函数非常简单，只需要修改元素的display属性即可。

示例 2

以下为在按钮点击事件中使用遮罩层效果的代码示例：

<div id="mask"></div>
<button onclick="showMask()">显示遮罩层</button>
<script>
    var mask = document.getElementById('mask');
    mask.style.position = 'fixed';
    mask.style.top = '0';
    mask.style.left = '0';
    mask.style.width = '100%';
    mask.style.height = '100%';
    mask.style.background = 'rgba(0,0,0,0.5)';
    mask.style.zIndex = '999';
    mask.style.display = 'none';

    function showMask() {
        mask.style.display = 'block';
        // 模拟耗时操作
        setTimeout(function() {
            hideMask();
        }, 3000);
    }

    function hideMask() {
        mask.style.display = 'none';
    }
</script>

在这个示例中，我们增加了一个按钮，并为其添加点击事件。在点击按钮时，我们先调用showMask()函数来显示遮罩层。接着，我们进行了一个模拟的耗时操作（setTimeout）来模拟对数据的处理或者加载等，完成后自动隐藏遮罩层。通过这段示例代码的演示，我们可以看到，使用原生js实现遮罩层十分方便，并且其效果确实可以在页面操作过程中起到一个较好的提醒和提示的作用。