How can I optimize a popup Javascript code?

Question

I'm just starting with Javascript and I made this popup code, and I was wondering if there's another code with the same result or a way of optimizing the Javascript.

The code must make the popup appear when one of the options is clicked and disappear when the click is somewhere else.

Popup code

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;
  })
});

Answer 1

If you are looking for a JS popup than check this:- https://www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/

It worked for me this way:

HTML code

     <div class="invalid-chars-alert-close-btn" onclick="document.getElementById('invalidChars-1').classList.toggle('active');">x</div>

JS: code inside if invalid characters written in my form then: 
      
    document.getElementById("invalidChars-1").classList.toggle("active");

Answer 2

This will do all that you require, but in a much shorter form

 puc=document.querySelectorAll("[popupContent]"); // popup divs... document.querySelector(".nav-bar__element").onclick=ev=>{ // in case the user clicked on the inner span and not the div: const pel=[...ev.path].find(e=>e.hasAttribute&&e.hasAttribute("hasPopup")) if (pel) { const el=pel.querySelector("[popupContent]"); puc.forEach(d=>d.style.display=d===el?"block":"none") } }

 body { margin: 0; font-family: sans-serif; height: 100vh; display: grid; grid-template-columns: 25fr 75fr; }.small-icon { width: 30px; height: 30px; } [hasPopup] { position: relative; display: flex; align-items: center; justify-content: center; margin: 30px; padding: 20px; border-radius: 10px; border: 1px solid hsl(0, 0%, 40%); } [hasPopup]:hover { cursor: pointer; } [popupContent] { position: absolute; cursor: auto; padding: 20px; border-radius: 10px; border: 1px solid hsl(0, 0%, 40%); left: 110%; display: none; }

 <div class='nav-bar__element nav-bar__element--utils'> <div class='utils__notifications' id='utilsNotifications' hasPopup> <span>Notifications</span> <div class="notifications-popup" popupContent> <div> notifications </div> </div> </div> <div class='utils__messages' id='utilsMessages' hasPopup> <span>Messages</span> <div class="messages-popup" popupContent> <div> messages </div> </div> </div> <div class='utils__settings' id='utilsMessages' hasPopup> <span>Settings</span> <div class="settings-popup" popupContent> <div> settings </div> </div> </div> <script type='text/javascript' src='script.js'></script> </div>