Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.06.2017, 20:16
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Закрыть модальное окно кликом вокруг
Вот код, который по клику на зелёном блоке 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");
      });
Ответить с цитированием
  #2 (permalink)  
Старый 26.06.2017, 20:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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

Последний раз редактировалось рони, 26.06.2017 в 20:33.
Ответить с цитированием
  #3 (permalink)  
Старый 26.06.2017, 20:44
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Рони, т.е. проблема в том, что при клике с целью remove оно срабатывает, но затем начинается bubble и срабатывает второй клик - выше - и поэтому создаётся впечатление, что окно не исчезает, да?
Ответить с цитированием
  #4 (permalink)  
Старый 26.06.2017, 20:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alessio18911,
да
Ответить с цитированием
  #5 (permalink)  
Старый 26.06.2017, 20:57
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

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

});
Ответить с цитированием
  #6 (permalink)  
Старый 26.06.2017, 21:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alessio18911,
в строке 10 всегда добавляйте event ... function(event){
и
пишите тоже самое для modal-content-window
Ответить с цитированием
  #7 (permalink)  
Старый 26.06.2017, 21:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Alessio18911,
искать по форуму, уже было
Ответить с цитированием
  #8 (permalink)  
Старый 26.06.2017, 21:10
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Спасибо Вам огромное!! Всё получилось!!
Ответить с цитированием
  #9 (permalink)  
Старый 26.06.2017, 21:19
Аспирант
Отправить личное сообщение для Alessio18911 Посмотреть профиль Найти все сообщения от Alessio18911
 
Регистрация: 18.06.2017
Сообщений: 87

Рони, простите, возможно и было. Но в основном всё идёт на JQuery - я же только-только в начале изучения JS. И коды очень сложные - чтобы разобраться самому (поискал схожую тему). Может, где-то есть тема на форуме для совсем новичков, чтобы я не засорял "эфир"?
Ответить с цитированием
  #10 (permalink)  
Старый 26.06.2017, 21:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

закрытие блока по клику вне его или крестику
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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Модальное окно. Salvat Элементы интерфейса 4 25.02.2016 09:33
Закрыть модальное окно K_PECT Общие вопросы Javascript 3 18.02.2016 21:22
Bootstrap как закрыть модальное окно Witold Events/DOM/Window 2 17.05.2015 18:50
Помогите закрыть модальное окно joylord Общие вопросы Javascript 1 19.05.2013 01:56
Помогите закрыть модальное окно... ale19 Общие вопросы Javascript 2 14.10.2011 08:46