JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例

以下是“JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例”的完整攻略。

1. 实现思路

实现点击某区域以外时弹窗的弹出与关闭功能，通常需要使用到以下两个关键点：

给页面添加遮罩层：当弹窗弹出时，为了让用户无法操作页面中的其他内容，我们需要添加一个遮罩层来将其他内容覆盖住；
给遮罩层和弹窗添加事件监听：我们需要监听“点击遮罩层”和“点击弹窗中除关闭按钮以外的部分”这两个事件，来触发相应的弹窗关闭和打开操作。

2. 示例一：点击遮罩关闭弹窗

以下是一段示例代码，用于实现点击遮罩关闭弹窗的功能：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>点击遮罩关闭弹窗</title>
    <style>
      /* 遮罩样式 */
      .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        z-index: 999;   /* 遮罩层级设置 */
        display: none;  /* 隐藏遮罩层 */
      }
      /* 弹窗样式 */
      .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: white;
        z-index: 1000;  /* 弹窗层级设置 */
      }
    </style>
  </head>
  <body>
    <button id="openBtn">打开弹窗</button>

    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 弹窗 -->
    <div class="popup">
      <h2>弹窗标题</h2>
      <p>弹窗内容</p>
      <button id="closeBtn">关闭</button>
    </div>

    <script>
      // 弹窗打开按钮点击事件
      document.getElementById('openBtn').onclick = function() {
        // 显示遮罩层和弹窗
        document.querySelector('.mask').style.display = 'block';
        document.querySelector('.popup').style.display = 'block';

        // 点击遮罩层关闭弹窗
        document.querySelector('.mask').onclick = function() {
          document.querySelector('.mask').style.display = 'none';
          document.querySelector('.popup').style.display = 'none';
        };
      };

      // 弹窗关闭按钮点击事件
      document.getElementById('closeBtn').onclick = function() {
        // 关闭弹窗和遮罩层
        document.querySelector('.mask').style.display = 'none';
        document.querySelector('.popup').style.display = 'none';
      };
    </script>
  </body>
</html>

这段代码中，我们首先定义了遮罩层（.mask）和弹窗（.popup）的样式，并将它们都设为固定定位（position: fixed）。接着，在打开弹窗的按钮点击事件中，我们通过修改其style.display属性来显示遮罩层和弹窗，并监听遮罩层的click事件，当点击遮罩时，我们同样通过修改其style.display属性来隐藏遮罩和弹窗。在弹窗中，我们还添加了一个“关闭”按钮，用于在点击时关闭弹窗和遮罩。

3. 示例二：点击弹窗以外区域关闭弹窗

如果我们想在用户点击弹窗以外区域时，同样能够关闭弹窗，那么可以在遮罩层上设置pointer-events: none来让它不响应鼠标事件。然后，通过在window对象上监听click事件，来判断用户是否点击了弹窗以外的区域，并在此情况下关闭弹窗。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>点击弹窗以外区域关闭弹窗</title>
    <style>
      /* 遮罩样式 */
      .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .5);
        z-index: 999;   /* 遮罩层级设置 */
        display: none;  /* 隐藏遮罩层 */
        pointer-events: none;
      }
      /* 弹窗样式 */
      .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        background-color: white;
        z-index: 1000;  /* 弹窗层级设置 */
      }
    </style>
  </head>
  <body>
    <button id="openBtn">打开弹窗</button>

    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 弹窗 -->
    <div class="popup">
      <h2>弹窗标题</h2>
      <p>弹窗内容</p>
      <button id="closeBtn">关闭</button>
    </div>

    <script>
      // 弹窗打开按钮点击事件
      document.getElementById('openBtn').onclick = function() {
        // 显示遮罩层和弹窗
        document.querySelector('.mask').style.display = 'block';
        document.querySelector('.mask').style.pointerEvents = 'auto';
        document.querySelector('.popup').style.display = 'block';

        // 给窗口添加click事件
        window.onclick = function(e) {
          // 如果点击区域不在弹窗内，则关闭弹窗和遮罩层
          var popupElem = document.querySelector('.popup');
          if (!popupElem.contains(e.target)) {
            document.querySelector('.mask').style.display = 'none';
            document.querySelector('.mask').style.pointerEvents = 'none';
            document.querySelector('.popup').style.display = 'none';
          }
        }
      };

      // 弹窗关闭按钮点击事件
      document.getElementById('closeBtn').onclick = function() {
        // 关闭弹窗和遮罩层
        document.querySelector('.mask').style.display = 'none';
        document.querySelector('.mask').style.pointerEvents = 'none';
        document.querySelector('.popup').style.display = 'none';
      };
    </script>
  </body>
</html>

在这段代码中，我们在打开弹窗时，增加了一个pointer-events属性，将其设为auto，以便在用户点击遮罩层时触发监听事件。并且我们在window对象上添加了一个click事件监听器，用于判断用户点击区域是否在弹窗中。如果不是，则关闭弹窗和遮罩层。