显示一个弹出框并隐藏其他弹出框 - JavaScript

当网站需要显示多个弹出框时，可能会出现多个弹出框同时显示的情况。这时，我们需要编写一个函数来处理弹出框的显示和隐藏。下面是一个示例函数：

function showPopup(popupId) {
  // 隐藏其他弹出框
  var popups = document.querySelectorAll('.popup');
  for (var i = 0; i < popups.length; i++) {
    if (popups[i].id !== popupId) {
      popups[i].style.display = 'none';
    }
  }

  // 显示指定弹出框
  var popup = document.getElementById(popupId);
  popup.style.display = 'block';
}

这个函数会接受一个参数 popupId，表示要显示的弹出框的 ID。函数首先获取网页上所有的弹出框，然后循环遍历这些弹出框，将除了指定的弹出框之外的其他弹出框全部隐藏。最后，函数找到指定的弹出框，将其显示出来。

在 HTML 文件中，我们需要为每个弹出框指定一个唯一的 ID，并且将它们的 class 设置为 popup，如下所示：

<div id="popup1" class="popup">
  <!-- 弹出框的内容 -->
</div>

<div id="popup2" class="popup">
  <!-- 弹出框的内容 -->
</div>

<!-- 还可以添加更多的弹出框 -->

这样，当我们需要显示弹出框时，只需要调用 showPopup 函数，并传入对应的弹出框 ID 即可，如下所示：

showPopup('popup1'); // 显示 ID 为 popup1 的弹出框

这个函数还可以进一步扩展，例如添加动画效果、在页面中央显示弹出框等等。不过，以上是基本的弹出框显示和隐藏逻辑。