如何使用 JavaScript 使除固定区域以外的整个屏幕变暗？(1)

📌 相关文章

📜 如何使用 JavaScript 使除固定区域以外的整个屏幕变暗？(1)

📅 最后修改于: 2023-12-03 15:08:20.024000 🧑 作者: Mango

如何使用 JavaScript 使除固定区域以外的整个屏幕变暗？

有时候我们需要在网页中实现一些弹框、提示框等浮层效果，我们希望在弹出浮层后，在其周围区域添加一些遮罩效果，从而使弹出的浮层更加明显。本文将介绍如何使用 JavaScript 实现这一效果。

本文所述的“除固定区域以外的整个屏幕”指的是当前浏览器窗口的可视区域，而不是整个网页文档区域。

实现思路

首先，我们需要创建一个遮罩层，它的样式为绝对定位（position: absolute），宽高为整个屏幕的宽高。然后，我们将其放置在 body 元素的内部，但在我们要固定的区域之后的位置。最后，我们将其显示出来，并且设置其背景色为半透明黑色，以达到遮罩效果。

实现步骤

首先，我们需要将遮罩层的样式设置好，代码如下：

.mask {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

然后，在 body 元素的末尾添加该遮罩层的 HTML 代码：

<div class="mask" style="display: none;"></div>

在 JavaScript 中获取该 mask 元素，并将其显示出来：

var mask = document.querySelector('.mask');
mask.style.display = 'block';

最后，我们需要将 mask 元素放在我们需要固定的区域之后。假设我们需要固定的区域的选择器为 “#fixed-area” ，我们可以通过以下代码实现：

var fixedArea = document.querySelector('#fixed-area');
fixedArea.parentNode.insertBefore(mask, fixedArea.nextSibling);

完整的代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mask Demo</title>
    <style>
      .mask {
        position: absolute;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="fixed-area" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);">This is a fixed area</div>
    <div class="mask" style="display: none;"></div>
    <script>
      var mask = document.querySelector('.mask');
      mask.style.display = 'block';

      var fixedArea = document.querySelector('#fixed-area');
      fixedArea.parentNode.insertBefore(mask, fixedArea.nextSibling);
    </script>
  </body>
</html>

效果如下图所示：

总结

本文介绍了如何使用 JavaScript 使除固定区域以外的整个屏幕变暗。具体实现思路是创建一个遮罩层，将其放置在 body 元素的内部，但在我们要固定的区域之后的位置，然后显示出来。通过以上步骤，我们可以轻松实现遮罩效果。