我只是从Javascript开始，我制作了这个弹出代码，我想知道是否有其他代码具有相同的结果或优化Javascript的方法。

当单击其中一个选项时，代码必须使弹出窗口出现，当单击位于其他地方时，该弹出窗口消失。

弹出代码

var activePopup;
document.querySelectorAll('[hasPopup]').forEach((popupParent) => {
  popupParent.addEventListener('click', e => {
    if (popupParent != activePopup && activePopup != null) {
      activePopup.querySelector('[popupContent]').style.display = 'none';
    }
    window.addEventListener('click', hasClicked => {
      let isOnPopup = false;
      hasClicked.path.forEach((event) => {
        if (event == popupParent) {
          isOnPopup = true;
        }
      })
      if (isOnPopup == false){
        popupParent.querySelector('[popupContent]').style.display = 'none';
      }
    })
    popupParent.querySelector('[popupContent]').style.display = 'block';
    activePopup = popupParent;
  })
});

顺晟科技：

如果您正在寻找JS弹出窗口，请检查以下内容:-https://www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/

对我来说是这样的:

HTML代码

var activePopup;
document.querySelectorAll('[hasPopup]').forEach((popupParent) => {
  popupParent.addEventListener('click', e => {
    if (popupParent != activePopup && activePopup != null) {
      activePopup.querySelector('[popupContent]').style.display = 'none';
    }
    window.addEventListener('click', hasClicked => {
      let isOnPopup = false;
      hasClicked.path.forEach((event) => {
        if (event == popupParent) {
          isOnPopup = true;
        }
      })
      if (isOnPopup == false){
        popupParent.querySelector('[popupContent]').style.display = 'none';
      }
    })
    popupParent.querySelector('[popupContent]').style.display = 'block';
    activePopup = popupParent;
  })
});

这将完成所需的所有操作，但形式要短得多