[Alessio18911]

Вот код, который по клику на зелёном блоке div.page вызывает появление модального окна (салатовый блок по центру) с "затенением" серого цвета вокруг. Мне нужно, чтобы модальное окно и затенение исчезали при клике мыши по серому "затенению". Код JS написал, но не почему-то оно не работает (исчезновение). Подскажите, пожалуйста, что нужно исправить. Нужно сделать на чистом JS, я новичок в этом.

<div class="page">
   <div class="shim-modal-content">
       <div class="modal-content-window"></div> 
   </div>
</div>

.page {
  position: relative;
  width: 400px;
  height: 500px;
  background-color: seagreen;
}

.shim-modal-content {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: grey;
}

.modal-content-window {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 350px;
  transform: translate(-50%, -50%);
  background-color: lightgreen;
}

.shim-modal-show {
  display: block;
}

var page = document.querySelector(".page");
      var shimModalContent = document.querySelector(".shim-modal-content");
      page.addEventListener("click", function(){
        shimModalContent.classList.add("shim-modal-show");
      });
        
      shimModalContent.addEventListener("click", function(){
        shimModalContent.classList.remove("shim-modal-show");
      });