纯js实现遮罩层效果原理分析

首先，什么是遮罩层效果呢？顾名思义，就是用来遮住某一区域的一层蒙版，可以用于模态框、提示框等场景。那我们该如何用纯js来实现遮罩层效果呢？

一、HTML结构

我们需要在HTML中定义遮罩层的结构，可以使用一个具有绝对定位的div元素来充当遮罩层，代码如下：

<body>
  <div id="mask"></div>
</body>

二、CSS样式

为了让遮罩层占据整个屏幕，我们需要设置它的CSS样式，将它置于页面最上方，同时设置它的透明度和背景颜色，代码如下：

#mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  opacity: 0.5;
  background-color: #000;
  display: none;
}

三、JS实现

接下来我们需要用纯JS来实现遮罩层的显示和隐藏。我们可以通过addEventListener为一个元素添加click事件,然后在回调函数中togggle来控制元素的显示和隐藏，代码如下：

const mask = document.getElementById('mask');
mask.addEventListener('click', function() {
  mask.style.display = 'none';
});

function toggleMask() {
  mask.style.display = mask.style.display === 'none' ? 'block' : 'none';
}

以上代码可以控制当遮罩层被点击时，它会自动隐藏。代码中toggleMask函数可以用于通过JS代码来控制遮罩层的显示和隐藏。

四、示例说明

以下是两个示例来说明遮罩层的使用场景和实现方法：

（1）在页面中打开模态框时，可以利用遮罩层来实现灰色背景遮罩，代码如下：

<body>
  <button onclick="openModal()">打开模态框</button>
  <div id="modal" style="display:none">
    这是一个模态框
  </div>
  <div id="mask"></div>
  <script>
    const modal = document.getElementById('modal');
    const mask = document.getElementById('mask');
    mask.addEventListener('click', function() {
      closeModal();
    });
    function openModal() {
      modal.style.display = 'block';
      mask.style.display = 'block';
    }
    function closeModal() {
      modal.style.display = 'none';
      mask.style.display = 'none';
    }
  </script>
</body>

这个例子中，当用户点击打开模态框的按钮时，会先将遮罩层显示出来，然后再将模态框显示出来，当遮罩层被点击时，模态框和遮罩层都会隐藏起来。

（2）在进行页面加载时，可以在页面中添加一个遮罩层来提示用户当前页面正在加载中，代码如下：

<body>
  <div id="loading" style="display:none">
    加载中...
  </div>
  <div id="mask"></div>
  <script>
    const loading = document.getElementById('loading');
    const mask = document.getElementById('mask');
    mask.addEventListener('click', function() {
      loading.style.display = 'none';
      mask.style.display = 'none';
    });
    window.addEventListener('load', function() {
      loading.style.display = 'none';
      mask.style.display = 'none';
    });
    window.addEventListener('beforeunload', function() {
      loading.style.display = 'block';
      mask.style.display = 'block';
    });
  </script>
</body>

这个例子中，当用户打开页面时，会显示一个提示加载中的遮罩层，当页面加载完成后，遮罩层会自动隐藏，如果用户在页面还未加载完成时，关闭了页面，也会显示遮罩层。需要注意的是，在beforeunload事件中，必须将遮罩层显示，并且在unload事件中，必须将遮罩层隐藏。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：纯js实现遮罩层效果原理分析 - Python技术站

纯js实现遮罩层效果原理分析

一、HTML结构

二、CSS样式

三、JS实现

四、示例说明

相关文章