Javascript-форум - Закрыть модальное окно кликом вокруг

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Закрыть модальное окно кликом вокруг (https://javascript.ru/forum/misc/69479-zakryt-modalnoe-okno-klikom-vokrug.html)

Закрыть модальное окно кликом вокруг

Вот код, который по клику на зелёном блоке 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");
      });

Alessio18911,
отмените всплытие клика в строке 7, иначе оно "всплывёт" до строки 3 и сработает уже открытие.

Рони, т.е. проблема в том, что при клике с целью remove оно срабатывает, но затем начинается bubble и срабатывает второй клик - выше - и поэтому создаётся впечатление, что окно не исчезает, да?

Alessio18911,
да

Рони, теперь всё стало лучше, спасибо, Вы, как всегда, меня выручаете :) . Но подскажите, пожалуйста, ещё один нюанс: мне нужно, чтобы при клике по самому модальному окну - у меня это форма, в которой есть поля для заполнения - оно и затенение не исчезало, а исчезали, только если кликнуть по затенению вокруг самого модального окна-формы. Сейчас исчезает всё. Код выглядит так:

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(){

        event.stopPropagation();
        shimModalContent.classList.remove("shim-modal-show");

});

Alessio18911,
в строке 10 всегда добавляйте event ... function(event){
и
пишите тоже самое для modal-content-window

Alessio18911,
искать по форуму, уже было

Спасибо Вам огромное!! Всё получилось!!:)

Рони, простите, возможно и было. Но в основном всё идёт на JQuery - я же только-только в начале изучения JS. И коды очень сложные - чтобы разобраться самому (поискал схожую тему). Может, где-то есть тема на форуме для совсем новичков, чтобы я не засорял "эфир"?

закрытие блока по клику вне его или крестику

Alessio18911,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .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;
}

  </style>


</head>

<body>
<div class="page">
   <div class="shim-modal-content">
       <div class="modal-content-window">
          <input name="" type="button" value="X" class="close">
       <form action="http://">
<input name="" type="submit" value="send" class="send">
</form></div>
   </div>
</div>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
      var page = document.querySelector(".page");
      var shimModalContent = document.querySelector(".shim-modal-content");
      page.addEventListener("click", function(event){
          var target = event.target;
          if(target.closest(".modal-content-window") && !target.closest(".send") && !target.closest(".close"))
          event.stopPropagation();
          else if( target.closest(".shim-modal-content") )
          shimModalContent.classList.remove("shim-modal-show");
          else shimModalContent.classList.add("shim-modal-show");
      });
    });


  </script>
</body>
</html>