how can fix this when the user click outside the modal the close it

Question

I added the code to close the modal when the user clicks outside it, but when I click outside, it gets blurry and does not open the modal.

// Function: Open/Close modal
function toggle() {
  const blur = document.getElementById('blur');
  blur.classList.toggle('active');
  const popup = document.getElementById('popup');
  popup.classList.toggle('active');
}

// Event Listener: Global
window.addEventListener("click", function(event) {
  const modal = document.getElementById('popup');
  // When the user clicks anywhere outside of the modal, close it
  if (event.target === modal) {
    modal.style.visibility = "hidden";
  }
});

<!-- CONTAINER -->
<div class="container" id="blur">
  <div class="content">
    <a class="" href="#" onclick="toggle()">Open modal</a>
  </div>
</div>

<!-- MODAL -->
<div id="popup">
  <a id="close" href="#" onclick="toggle()">&times;</a>
  <div>
    <p>other contents here</p>
  </div>
</div>

Answer 1

1. you need to define the css properly, as you didn't provide so i define for you.
2. when you click on the gray area, you need to make sure it will exclude the content area, so you need to define the content area with additional css class
3. your toggle() use toggle to swap the active css class, so your eventlistener better to use the same way, so i change it for you.

function toggle() {
        var blur=document.getElementById('blur');
        blur.classList.toggle('active');
        var popup = document.getElementById('popup');
        popup.classList.toggle('active');
    }

  window.addEventListener("click", function(event) {

      var modal = document.getElementById('popup');
      var modalContent = document.querySelector('#popup .modal-content');
      // When the user clicks anywhere outside of the modal, close it
      if (event.target == modal && event.target !==modalContent) {
          popup.classList.toggle('active');
      }
  });

#popup{
  display:none;
  position: absolute;
  z-index:100;
  background-color:#000000ad;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
}

#popup.active{
  display:block;
}

#popup .modal-content {
  background-color:white;
    z-index:101;
}

<div class="container" id="blur">
    <div class="content">
        <a class="" href="#" onclick="toggle()">Open modal</a>
    </div>
</div>

<!--
    MODAL WINDOW
-->
<div id="popup">
    <a id="close" href="#" onclick="toggle()">&times;</a>

<div>
    <p class="modal-content">other contents here</p>
</div>
</div>